首先在wxml文件中(zhōng)輸入地圖代碼，相關内容自行查閱小(xiǎo)程序開(kāi)發教程

<map class="maps" id="map" longitude="112.8977300000" latitude="28.2174900000" scale="16" style="width:100%;height:500rpx;" bindtap="mapclick" markers="{{markers}}"></map>

longitude：經度

latitude：緯度

markers：标記(這個要動态的傳遞數值，所以這裏就使用{{markers}})

下(xià)面就是markers的數值傳遞，在page的data中(zhōng)設置markers數組的值

Page({
  data: {
    markers: [{
      iconPath: "/images/location.png",//定位圖标
      id: 0,
      latitude: 28.2174900000,//緯度
      longitude: 112.8977300000,//經度
      width: 50,//圖标寬
      height: 50,//圖标高
    }],
  }, 
}）

這樣前端的地圖組件就定位完成！

下(xià)一(yī)步操作就是怎麽進行直接導航，這裏使用微信自帶的導航組件wx.openLocation(相關内容自行查閱小(xiǎo)程序開(kāi)發教程)

首先在地圖上綁定一(yī)個事件,使用bindtap="mapclick" 來綁定點擊地圖的操作事件mapclick,然後就是設置點擊事件。

mapclick: function () {
    wx.openLocation({
      latitude: 28.2174900000,//緯度
      longitude: 112.8977300000,//經度
      scale: 18,//縮放(fàng)
      name: '蘇州工業園區草陽網絡科技有限公司',
      address: '蘇州相城區中(zhōng)翔大(dà)廈15012'
    })
  },