微信小程序根据起点和终点进行路线规划(driving)

一：wxml部分

<view class="panel-map">
  <map longitude="{{longitude}}" latitude="{{latitude}}"  markers="{{markers}}" polyline="{{polyline}}" scale="12"></map>
</view>

二.js 在js顶部声明腾讯地图sdk

var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.js');
var qqMapWx = new QQMapWX({ key: '' })//此处key获取在腾讯地图SDK获取

https://lbs.qq.com/qqmap_wx_jssdk/index.html key获取地址
三.在onShow调用

  onShow: function () {
 	 this.queryMapRoutine()
  },

四.queryMapRoutine具体实现代码

// 查询地图路线
  queryMapRoutine:function(e) {
    var _this=this
    qqMapWx.direction({
      mode: 'driving', // 'driving'(驾车路线规划)
      // from参数不填默认当前地址
      from: fromObj,
      to: toObj,
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        let markersTemp=[]
        let route = ret.result.routes[0]
        let distance = route.distance < 1000 ?
          `${route.distance}米` :
          `${(route.distance / 1000).toFixed(2)}公里`
        let duration = route.duration < 60 ?
          `${route.duration}分钟` :
          `${parseInt(route.duration / 60)}小时${route.duration % 60}分钟`
        **//坐标解压（返回的点串坐标，通过前向差分进行压缩）
        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] })
        }**
        let startPoint = pl[0]
        let endPoint = pl[pl.length-1]
        let midPoint = pl[((pl.length) / 2).toFixed(0)]
        markersTemp = [
          {
            iconPath: '../../image/common/oringin.png',
            id: 0,
            latitude: startPoint.latitude,
            longitude: startPoint.longitude,
            width: 28,
            height: 28,
            zIndex: -1,
            anchor: { x: 0.5, y: 1 }
          },
          {
            iconPath: '../../image/common/finish.png',
            id: 1,
            latitude: endPoint.latitude,
            longitude: endPoint.longitude,
            width: 28,
            height: 28,
            zIndex: -1,
            anchor: { x: 0.5, y: 1 }
          },
          {
            id: 0,
            latitude: midPoint.latitude,
            longitude: midPoint.longitude,
            label: {
              content: '全程' + distance + '，约' + duration+'到达',  //文本
              color: '#000000',  //文本颜色
              borderRadius: 3,  //边框圆角
              borderWidth: 1,  //边框宽度
              borderColor: '#cccccc',  //边框颜色
              bgColor: '#ffffff',  //背景色
              padding: 5,  //文本边缘留白
              textAlign: 'center'  //文本对齐方式。有效值: left, right, center
            }
          }]
        _this.setData({
          latitude: midPoint.latitude,
          longitude: midPoint.longitude,
          polyline: [{
            points: pl,
            color: "#20B2AA", width: 4, dottedLine: false
          }],
          markers:markersTemp,
          distance:distance,
          duration:duration
        })
      },
    })
  },

五.效果图