微信小程序地图返回当前位置map，

功能：点击右下角图标，地图中心点返回当前定位，且缩放为初始缩放值

需要解决的问题：

1、地图上下左右拖动后，点击右下角图标返回当前定位的位置

2、地图缩放大小后，点击右下角图标能返回初始化设置的缩放值

思路：

下面是wxml页面相关代码:

只截取部分核心代码 ↓ ，css根据布局需求更改即可

<!--wxml页面代码 已授权获取位置-->
<map id="map"
  style="width:100%;height:100%;"
  longitude="{{currentLo}}"
  latitude="{{currentLa}}"
  scale="{{scale}}"
  markers="{{markers}}"
  show-location
  bindtap='mapTap'
  bindmarkertap="markerTap"
  bindregionchange="regionChange"
>
  <cover-view class="cover-view" bindtap="controltap">
    <cover-image class="station" src="https://linli-oss.vecommunity.com/xchx/icon/position.jpg"></cover-image>
  </cover-view>
</map>

js部分↓ 

regionChange(e) {
  // 获取地图
  let mpCtx = wx.createMapContext('map')

  // 判断是缩放，打印一下e，就能看到缩放值。注意：需真机测试
  if (e.type == "end" && e.causedBy == "scale") {
    // 如果是缩放，获取房钱缩放值，并修改data中的scale属性（此处很关键）
    mpCtx.getScale({
      success: function(res){
        if (res.scale != this.data.scale) {
          // 如果缩放了 = 现在的缩放值和初始值不一样时，修改data中的scale值
          this.setData({
            scale: res.scale
          })
        }
      }
    })
  }
},

设置缩放值这一步很重要

如果这里不进行缩放值设置，在后面点击右下角图标的时候，地图的缩放级别将不会改变。

原因是：data中scale:13，缩放地图之后，虽然视觉上有变化，但data中的scale数据没有变化。导致点击右下角图标时候，地图视觉上没有任何变化。

切记：视图根据数据变化

注意：缩放要用真机测试 / 真机联调测试，开发者工具可能没有效果 

// 右下角图标绑定的事件：点击右下角图标触发
controltap(e) {
  // 创建 map 上下文 MapContext 对象。建议使用 wx.createSelectorQuery 获取 context 对象
  // 获取地图，map要与wxml页面的id名一致。注意：不需要#符号
  let mpCtx = wx.createMapContext('map')
  
  // 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。
  mpCtx.moveToLocation()

  // 将地图缩放值改为初始值
  this.setData({
    scale: 13
  })
}

 

 具体属性含义请参考官方API：https://developers.weixin.qq.com/miniprogram/dev/component/map.html