微信小程序 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