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

太过爱你忘了你带给我的痛 2023-06-30 02:47 3阅读 0赞

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

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

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

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

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

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

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

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