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

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

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

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

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

3. 在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
    }]
}

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

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

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

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