小程序4-地图定位3

时间：2020-07-09 01:22:48 收藏：0 阅读：121

　　上一次已经能正常显示地图，并定位到当前用户所在位置。如果用户滑动地图，那么地图的中心点就不是当前位置了，如果滑动的距离远，再手动回到当前位置是非常麻烦的。　　

　　接下来我们添加一个功能，在地图的左下角添加一个‘center’图标，点击这个图标，地图中心点就回到当前位置。效果如下图所示：

　　技术图片

　　左下角那个黑色的圆圈，就是center.png图标。

　　思路其实很简单，有了做地图中心图标的经验，这个无非也就是再弄格图片，定位到左下角位置，然后给他设置点击事件就完事了。接下来说下实现的步骤。

　　1.把center.png图片导入到项目的resources目录下。

　　2.把此图标加入到map组件的controls属性的集合中，先来修改页面的.js文件代码，代码如下：　　

  data: {
    longitude: ‘‘, //经度
    latitude: ‘‘,   //维度 
    controls: [{
      id: 1,
      iconPath: ‘/resources/pin.png‘,
      position: {
        left: app.globalData.windowWidth / 2 - 15,
        top: (app.globalData.windowHeight - 40) /2 - 40,
        width: 30,
        height: 40,
      }
    },
    {
      id: 2,
      iconPath: ‘/resources/center.png‘,
      position: {
        left: 20,
        top: app.globalData.windowHeight - 100,
        width: 40,
        height: 40,
      },
      clickable: true
    }]
  },

　　这里的代码跟之前的pin.png没什么大的区别，唯一区别就是它是可以点击的，所以需要设置clickable ： true

　　3.在页面的.wxml中设置此图标的点击事件。代码如下：

  <map longitude="{{longitude}}" latitude="{{latitude}}" id="map" class="map" show-location="true" scale="17"
　　 controls="{{controls}}" bindcontroltap="centerTap"></map>

　　关键点就是属性 bindcontroltap，给它的值是点击的响应函数名，当然你可以根据自己的需要命名，这里声明的函数名是centerTap。

　　4.再回到页面的.js文件中。由于我们希望的效果是点击这个center图标，能让地图中心点回到当前位置，所以这时候要调用微信提供的api。这个api又需要先获取到地图的上下文对象，所以我们需要找一个合适的时机来获取地图上下文对象（mapContext）。这个时机就是页面的生命周期函数onReady。代码如下：

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

　　接下来，我们只需要在centerTap这个点击响应函数中，通过mapCtx这个地图上下文对象，来调用api，让地图中心点回到当前位置就可以了。

  centerTap(e){
    // console.log(e);
    if(e.controlId == 2){ //点击的是center.png图标
      this.mapCtx.moveToLocation();
    }
  },

　　这里要说明的一点是，这个方法有个参数e，它其实就相当于js里的事件对象，封装了一些有关事件的重要参数。比如通过e.controlId就能拿到被点击的control对象的id。这一点很有用，当你地图上有多个control图标的时候，通过这个可以来区分用户点击的是哪一个。

　　至此搞定。