小程序地图组件的使用
主要是两个文件
maps.js
maps.wxml
在app.js中添加上地图文件的路径
1获取当前位置
屏幕快照 2018-05-27 下午10.04.50.png
maps.wxml代码
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"
scale="14" markers="{{markers}}" bindmarkertap="markertap"
show-location style="width: 100%; height: 300px;"></map>
maps.js代码
wx.getLocation(OBJECT)
获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。
将wx.getLocation放在onload方法中，
屏幕快照 2018-05-27 下午10.16.10.png
这里marker标记点有个点击事件bindmarkertap（点击标记点时触发 ），
markertap:function(e){
console.log(e.markerId,'2')
}
2视野发生改变触发事件
bindregionchange：视野发生变化时触发
maps.wxml代码
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"
scale="14" controls="{{controls}}" markers="{{markers}}"
bindmarkertap="markertap"bindregionchange="regionchange"
show-location style="width: 100%; height: 300px;"></map>
maps.js代码
regionchange:function(e){
console.log(e.type,'1',e)
}
3点击控件时触发
bindcontroltap：点击控件时触发
maps.wxml代码
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"
scale="14" controls="{{controls}}" bindcontroltap="controltap"
markers="{{markers}}" bindmarkertap="markertap"
bindregionchange="regionchange" show-location style="width:
100%; height: 300px;"></map>
maps.js代码
需要一个事件方法和一个控件
controltap:function(e){
console.log(e.controlId,'3',e)
},
控件参数要放到data中，在地图上显示控件，控件不随着地图移动。
controls: [{
id: 1,
iconPath: '../assests/imgs/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
具体更多信息请查看微信小程序官方文档