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

　　接下来我们添加一个功能，在地图的左下角添加一个‘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图标的时候，通过这个可以来区分用户点击的是哪一个。

　　至此搞定。