微信小程序 map 点击图标回到自己的位置（不使用controls控件）

先上效果图：

原由(必看)：

本来微信小程序的map 里面的 controls控件可以轻松实现，但是官方说要废弃了，说采用 cover-view代替，其实就是一个点击事件。用不用cover-view 都可以的。被误导了一个多小时。

用的是就是这一个函数

  moveTolocation: function () {
    var mapCtx = wx.createMapContext(mapId); //wxml中map标签的id值
    mapCtx.moveToLocation();
  }

下面是全部的代码

xwml中

 /** map  注意： 这里map的Id 特别重要 **/
 <map id="myMap" style="width: 100%; height: 800px;" latitude="{{latitude}}"   longitude="{{longitude}}" markers="{{markers}}" show-location="true" show-compass="true" bindmarkertap="getMarkers" wx:if="{{hasMaekers}}" bindcallouttap="getCallOut">
 </map>
 /** 这个就是地图上图标的代码 用不用 cover-view  都行的   设置了一个绑定事件 moveTolocation **/
 <view class="viewlistd"  bindtap="moveTolocation">
    <view class="viewlistblock" style="background:none;">
      <view class="viewlittle" style="padding:0;">
        <image src="../images/[email protected]" mode="" class="" id="" style="width:120rpx;height:120rpx;"></image>
      </view>
    </view>
</view>

js中

Page({
  /**
   * 页面的初始数据
   */
  data: {
    mapId: "myMap" //wxml中的map的Id值
  },
  /**
    * 跳转到当前的位置
    */
  moveTolocation: function () {
    //mapId 就是你在 map 标签中定义的 id
    let Id = this.data.mapId
    var mapCtx = wx.createMapContext(Id);
    mapCtx.moveToLocation();
  }
  })

这个文章map总结很好很受教，总结帖出来

https://www.jianshu.com/p/5b2f95a16fce