微信小程序-点击marker标记点进行路线规划（附源码）

 1、微信小程序支持路线规划，官方有现成组件，但是仅支持输入起点终点的经纬度信息进行路线规划，如下图

 2、官方接口地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection
 3、项目需求:点击地图上的标记点，自动进行路线规划，更换标记点就更换路线，效果如图

 4、要实现项目需求，只需要稍微改动官方提供的接口代码即可
 5、详细步骤
 (1)下载腾讯地图SDK，官方下载链接：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

 (2)解压文件后得到两个js文件

 (3)小程序中新建libs目录，并将两个解压的js文件扔进去

 (4)在对应的js文件中引入SDK并实例化API

 (5)部分重点js代码讲解（后面有整体代码）

 （6）定义方法之后就是调用，在初次加载地图的时候要显示最近的一条路线规划，在点击marker标记点的时候要触发方法

 5、源码奉上

 wxml

<map id="map" 
 longitude="{{longitude}}"        //map的经度
 latitude="{{latitude}}"          //map的纬度
 show-location="true"             //是否展示当前定位
 include-points="{{markers}}"     //缩放展示所有的标记点
 markers="{{markers}}"            //map上的标记点
 bindmarkertap="markertap"        //点击标记点触发的事件
 polyline="{{polyline}}">         //路线规划 *很重要*
 </map>

//点击marker进行路线规划
getp:function(){
  var that=this;
  qqmapsdk.direction({
    mode: 'walking',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
    //from参数传入当前定位
    from: {
      latitude:that.data.latitude,
      longitude:that.data.longitude
    },
    //to:传入点击的marker定位
    to:{
      latitude:app.globalData.weidu,
      longitude:app.globalData.jingdu
    },
    success: function (res) {
      console.log(+res);
      // console.log("纬度"+app.globalData.weidu)
      var ret = res;
      var coors = ret.result.routes[0].polyline, pl = [];
      //坐标解压（返回的点串坐标，通过前向差分进行压缩）
      var kr = 1000000;
      for (var i = 2; i < coors.length; i++) {
        coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
      }
      //将解压后的坐标放入点串数组pl中
      for (var i = 0; i < coors.length; i += 2) {
        pl.push({ latitude: coors[i], longitude: coors[i + 1] })
      }
      // console.log(pl)
      console.log(that.data.address);
      //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
      that.setData({
        latitude:pl[0].latitude,
        longitude:pl[0].longitude,
        polyline: [{
          arrowLine:true,
          points: pl,
          color: '#3394F8',
          borderColor:'#3394F8',
          borderWidth:6,
          width: 6
        }]
      })
    },
  });
}

 END