首先在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: '苏州相城区中翔大厦15012'
    })
  },