小程序里有內(nèi)置的地圖，只要正確使用文檔給出的 API 就能實現(xiàn)標記尋路等功能滞欠。
- 布局
<map id="myMap" longitude="{{flongitude}}" latitude="{{flatitude}}" scale="16" show-location style="width: 100%; height: 92%;" markers="{{markers}}" bindmarkertap="getParking"></map>
<button type='primary' bindtap='getMapInfo' >重新獲取位置</button>
- js
makrers:[{
{
id: 0,
latitude: 24.336022,
longitude: 109.462035,
iconPath: '../../image/停車場1.png',
callout: {
content: "停車場：001",
color: "#ff0000",
borderRadius: "10",
bgColor: "#ffffff",
padding: "10",
display: "ALWAYS"
}
}]
getMapInfo:function(){
var that = this;
wx.getLocation({
type: 'gcj02',
altitude: true,
success: function (res) {
console.log(res)
that.setData({
flatitude: res.latitude,
flongitude: res.longitude,
})
}
})
},
getParking: function (EventHandle){
console.log(EventHandle.markerId)
console.log(markerParking[EventHandle.markerId])
var myParking = markerParking[EventHandle.markerId]
wx.openLocation({
name: myParking.callout.content,
latitude: myParking.latitude,
longitude: myParking.longitude,
scale: 16
})
},
image.png
image.png
image.png
-
效果
地圖.png
尋路.png
現(xiàn)在圖標氣泡的展示只是靜態(tài)的蒙挑，下一步將會與數(shù)據(jù)庫對接繼續(xù)完善功能
