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

向右看齐 2023-05-31 10:21 10阅读 0赞

先上效果图：  
![在这里插入图片描述][20191024165441253.gif]

# 原由(必看)： #

**本来微信小程序的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/mb@2x.png" 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

[20191024165441253.gif]: /images/20230531/db48f69d29e640b5a2d4ea857f98f89f.png