微信小程序地址导航功能实现详解

微信小程序地址导航功能

1. 微信小程序地址导航功能通过点击地址或者导航来调用微信小程序自带的api来获取到自己的位置，并且进行跳转，然后再在新的页面里打开外部程序，例如高德地图或者百度地图，打开之后会自动出现导航页面，不过需要提前设置好目的地，因为没有请求，所以我是直接写死的，一会儿会说如果是请求来的应该怎么做。

2. 首先需要在app.json文件里声明permission字段，因为开发者需要填写获取用户地理位置的用途说明，如果不写则会出现如下图的弹框：

声明promission字段需要在app.json中的第一个大括号里面声明，代码如下：

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

3. 接下来则需要在wxml里写了，代码如下：

<view bindtap="onGuideTap" data-latitude='35.41408' data-longitude='114.066224' data-bankName='新乡医学院'  style="margin-top:30rpx">
	<image style="width:36%;height:110rpx;" class="mix" src="/image/导航.png"></image>
	<view><text>地图导航</text></view>
</view>

因为我写的是样式是点击这个图片或者字，可以跳转到导航页面，当然也可以写其他方法，只要将view后边的写上去就行了，上边的代码，其中bindtap就是一个事件，当点击地图导航的时候，会执行这个函数，来跳转到导航页面，后边的data-latitude和data-longitude都是即将要导航到那里的经纬度，后边的名称。

4.接下来就是wxjs文件了，代码如下：

 onLoad: function(options) {
    var that = this
    //获取当前的地理位置、速度
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        //赋值经纬度
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
      }
    })
  },
  bindcontroltap(e) {
    var that = this;
    if (e.controlId == 1) {
      that.setData({
        latitude: this.data.latitude,
        longitude: this.data.longitude,
        scale: 14,
      })
    }
  },
   onGuideTap: function (event) {
    var lat = Number(event.currentTarget.dataset.latitude);
    var lon = Number(event.currentTarget.dataset.longitude);
    var bankName = event.currentTarget.dataset.bankname;
    console.log(lat);
    console.log(lon);
    wx.openLocation({
      type: 'gcj02',
      latitude: lat,
      longitude: lon,
      name: bankName,
      scale: 28
    })
  },

注：运行的时候需要在手机上调试，才可以看出效果