微信小程序如何实现点击地图控件后位置移动到当前的定位点

在index.js中使用地图，使用controls控件和show-locatio展示带有方向的当前定位点，以及bindcontroltap绑定点击事件，代码如下所示：

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" class="map" show-location controls="{{controls}}" bindcontroltap="controltap"></map>

在app.js中，在onLaunch() 生命周期函数中，获取到当前的设备信息，当前的窗口宽度和高度信息，代码如下所示：

onLaunch: function () {try {const res = wx.getSystemInfoSync()this.globalData.windowHeight = res.windowHeightthis.globalData.windowWidth = res.windowWidth} catch (e) {}}

在index.js的Page中，定义controls控件，代码如下所示：

controls: [{id: 1,iconPath: '/resources/01.png',position: {top: ((app.globalData.windowHeight - 40) / 2) - 31,left: (app.globalData.windowWidth / 2) - 11,width: 22,height: 31}},{id: 2,iconPath: '/resources/02.png',position: {top: app.globalData.windowHeight - 90,left: 20,width: 30,height: 30},clickable: true}]
}

在index.js的Page中，在onReady()生命周期中，使用 wx.createMapContext 获取 map 上下文，代码如下所示：

onReady() {this.mapCtx = wx.createMapContext('map')}

在index.js，定义controltap()函数，实现点击控件后移动位置，代码如下所示：

controltap() {this.mapCtx.moveToLocation()}

微信小程序如何实现点击地图控件后位置移动到当前的定位点相关推荐

微信小程序控制盒子显示隐藏_微信小程序动态的显示或隐藏控件的方法(两种方法)...
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: 我是 ...
微信小程序动态的显示或隐藏控件
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: &l ...
微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序开发：腾讯地图集成详细步骤
前言在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的.但是话又说回来了,鹅厂的官方 API ...
微信小程序开发：腾讯地图集成步骤（旧题新说）
在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的. 但是话又说回来了,鹅厂的官方API真是不敢 ...
腾讯小程序php,微信小程序实现使用腾讯地图SDK步骤详细介绍
这篇文章微信小程序实现使用腾讯地图SDK步骤详细介绍的相关资料,需要的朋友可以参考下微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来 ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
java程序获取外部java程序的控件,将 Java 小程序迁移到 Microsoft J# 浏览器控件-JSP教程,Java技巧及代码...
visual j# .net 小组 microsoft corporation 摘要:通过 microsoft j# 浏览器控件,开发人员可以将所编写的在 java 虚拟机上运行的 java 小程序迁 ...

微信小程序如何实现点击地图控件后位置移动到当前的定位点

微信小程序如何实现点击地图控件后位置移动到当前的定位点相关推荐

最新文章

热门文章