前段時間有個群友問起小程序地圖怎么點擊直接進行導航！剛好我也在網上查找了下相關代碼，整理了下，下面就是詳細的說明！

首先在wxml文件中輸入地圖代碼，相關內容自行查閱小程序開發教程

<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}})

下面就是markers的數值傳遞，在page的data中設置markers數組的值

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

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

下一步操作就是怎么進行直接導航，這里使用微信自帶的導航組件wx.openLocation(相關內容自行查閱小程序開發教程)

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

mapclick: function () {
    wx.openLocation({
      latitude: 28.2174900000,//緯度
      longitude: 112.8977300000,//經度
      scale: 18,//縮放
      name: '湖南翱云網絡科技有限公司',
      address: '湖南長沙岳麓區桐梓坡西路雅閣國際'
    })
  },

文章來源：http://www.mubancool.com/article/40.html