控件绑定对应的事件函数。
在index.wxml中添加一个bindcontroltap
属性,赋值一个函数名
bindcontroltap='controltaps'
在index.js中定义一个controltap函数
//控件被点击事件
controltaps: function (e) {
console.log(e)
},
可以看出哪一个控件被点击了。
可以根据前面设置的controlId来对相应的控件执行相对应的操作。
onReady函数
在onload函数执行结束后,即页面渲染结束后就会执行这个函数。
可以将页面渲染结束后的地图位置信息保存在这个函数里
查看微信小程序文档API,
创建并返回 map 上下文 mapContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 <map/> 组件
wx.createMapContext(mapId, this)
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
}
}
此时可以随便的拖动地图,然后点击地图回到原来的位置。