微信小程序 腾讯地图 驾车路线规划demo

展示：

js:

// 引入腾讯地图SDK
const QQMapWX = require('../../libs/qqmap-wx-jssdk.js');  // 使用 require 代替 import
const config = require('../../utils/config.js');

const qqmapsdk = new QQMapWX({
  key: config.qqmapsdkkey
});


Page({
  data: {
    ployline: [],//路线渲染
    latitude: config.latitude,//纬度
    longitude: config.longitude,//经度
    //标记点
    markers: [{
      iconPath: "../images/123.png",
      id: 0,
      longitude: config.longitude,
      latitude: config.latitude,
      width: 30,
      height: 30,
    }],

  },
  onLoad: function (options) {  
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from:'31.214433015172,121.43931161794',
      to: '31.215149504146,121.43696819692',
      success: function (res) {
        console.log(res);
        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)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: "#20B2AA", width: 4, dottedLine: false
          
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },


      // 获取当前用户位置（可以用来获取起点）
      getLocation() {
        wx.getLocation({
          type: 'wgs84',
          success: (res) => {
            this.setData({
              latitude: res.latitude,
              longitude: res.longitude
            });
          },
          fail: () => {
            wx.showToast({
              title: '获取位置失败',
              icon: 'none'
            });
          }
        });
      },
    
  //视野发生变化时触发
  regionchange(e) {
    console.log(e.type)
  },
  //单击标记点时触发
  markertap(e) {
    console.log(e.markerId)
  },
  //单击空间上时触发
  controltap(e) {
    console.log(e.controlId)
  }
})

wxml:

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}"
 markers="{{markers}}" polyline="{{polyline}}" 
 bindregionchange="regionchange" show-location style='width:100%;height:70vh;'></map>

参考API：