微信小程序实现规划路线

背景: 我们是要实现,首先把一个具体的位置标记在地图上,点击规划路线之后,可以将当前位置到标记位置形成一条路线

首先配置一下app.json

    "plugins": {
        "routePlan": {
            "version": "1.0.18",
            "provider": "wx50b5593e81dd937a"
        }
    },
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置将用于定位"
        }
    }

以下代码实现根据自己给出的地址标记

qqmap-wx-jssdk.min的下载链接  JavaScriptSDK v1.2  

  * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    //腾讯地图
    // 引入SDK核心类
    //qqmap-wx-jssdk.min需要你下载引入到自己的项目
    var QQMapWX = require('../../../../utils/qqmap-wx-jssdk.min');

    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
      key: '自己的key' // 必填
    });
    //调用地址解析接口
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: that.data.company.address,
      success: function (res) { //成功后的回调
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        that.setData({ //赋值
          longitude: longitude,
          latitude: latitude,
          markers: [{
            latitude,
            longitude 
          }]
        })
        // console.log(that.data.latitude,that.data.longitude)
      },
      fail: function (error) {
        console.error(error);
      },
      // complete: function (res) {
        // console.log(res);
      // },
    })

  },

以下实现规划路线的功能

//goRouterPlan是一个按钮
  goRouterPlan() {
    let plugin = requirePlugin('routePlan');
    let key = '000000000'; //使用在腾讯位置服务申请的key
    let referer = ''; //调用插件的app的名称
    console.log(this.longitude,)
    let endPoint = JSON.stringify({ //终点
      'name':this.data.company.address,
      'latitude': this.data.latitude,
      'longitude':this.data.longitude
    });
    wx.navigateTo({
      url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
    });
  },