小程序地圖組件的使用
主要是兩個(gè)文件
maps.js
maps.wxml
在app.js中添加上地圖文件的路徑
1獲取當(dāng)前位置
屏幕快照 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)
獲取當(dāng)前的地理位置、速度。當(dāng)用戶離開小程序后颓遏，此接口無(wú)法調(diào)用；當(dāng)用戶點(diǎn)擊“顯示在聊天頂部”時(shí)掐隐，此接口可繼續(xù)調(diào)用。
將wx.getLocation放在onload方法中钞馁，
屏幕快照 2018-05-27 下午10.16.10.png
這里marker標(biāo)記點(diǎn)有個(gè)點(diǎn)擊事件bindmarkertap（點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā) ）虑省，
markertap:function(e){
console.log(e.markerId,'2')
}
2視野發(fā)生改變觸發(fā)事件
bindregionchange：視野發(fā)生變化時(shí)觸發(fā)
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點(diǎn)擊控件時(shí)觸發(fā)
bindcontroltap：點(diǎn)擊控件時(shí)觸發(fā)
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代碼
需要一個(gè)事件方法和一個(gè)控件
controltap:function(e){
console.log(e.controlId,'3',e)
},
控件參數(shù)要放到data中，在地圖上顯示控件僧凰，控件不隨著地圖移動(dòng)探颈。
controls: [{
id: 1,
iconPath: '../assests/imgs/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
具體更多信息請(qǐng)查看微信小程序官方文檔