地图中控件绑定事件

控件绑定对应的事件函数。
在index.wxml中添加一个bindcontroltap属性，赋值一个函数名
bindcontroltap='controltaps'
在index.js中定义一个controltap函数

//控件被点击事件
  controltaps: function (e) {
    console.log(e)
  },

可以看出哪一个控件被点击了。

image.png

可以根据前面设置的controlId来对相应的控件执行相对应的操作。

onReady函数

在onload函数执行结束后，即页面渲染结束后就会执行这个函数。
可以将页面渲染结束后的地图位置信息保存在这个函数里
查看微信小程序文档API,
创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map/> 组件
wx.createMapContext(mapId, this)

image.png

onReady:function(res){
    this.mapCtx=wx.createMapContext("mymap")
  }

注意:"mymap"是指map标签的id,所以需要给map添加一个id属性
id='mymap'

回到原来位置
控件的id为4，所以cid==4时调用moveToLocation返回当前位置

 //控件被点击事件
  controltaps: function (e) {
    var cid = e.controlId;
    if(cid==4){
      this.mapCtx.moveToLocation();
    }
    console.log(cid);
  },

注意：这里需要设置map的属性show-location='true';
此时就可以拖动地图，然后点击控件4就可以返回到原来的位置。这时候可以在原来的位置加一个控件，表示这是原来的位置

 {
             id: 5,
             iconPath: '/img/location.png',
             position: {
               width: 30,
               height: 30,
               left: windowWidth / 2 - 15,
               top: windowHeight /2 - 26
             }
           }

此时可以随便的拖动地图，然后点击地图回到原来的位置。