小程序里有内置的地图，只要正确使用文档给出的 API 就能实现标记寻路等功能。
- 布局
<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
现在图标气泡的展示只是静态的，下一步将会与数据库对接继续完善功能
