小程序地图组件应用

小程序里有内置的地图，只要正确使用文档给出的 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

现在图标气泡的展示只是静态的，下一步将会与数据库对接继续完善功能