小程序中规划地图路径在地图上显示、并且标记当前移动的位置

wxml 

 css

map{width: 100% !important;height: 800px !important;}

 js.

Page({
  data: {
    markers: [{
      iconPath: "../images/img1.jpg",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    },
      {
        iconPath: "../images/img2.jpg",
        id: 1,
        latitude: 23.090994,
        longitude: 113.524520,
        width: 50,
        height: 50
      },
      {
        iconPath: "../images/img3.jpg",
        id: 2,
        latitude: 23.091994,
        longitude: 113.424530,
        width: 50,
        height: 50
      }],
    includePoints: [{
      latitude: 23.099994,
      longitude: 113.324520
    },
    {
      latitude: 23.090994,
      longitude: 113.524520
    }],
    polyline: []
  },
  onLoad: function (options) {

  // 调用腾讯 地图IP定位接口查询骑手的当前位置、需要的参数是骑手的IP
    wx.request({
      url: 'http://ip-api.com/json',
      success: function (e) {
        console.log('ip地址：', e.data);
        var ip = e.data.query;
        wx.request({
          url: 'https://apis.map.qq.com/ws/location/v1/ip?ip='+ ip +'&key=U4RBZ-7R3KJ-LOKFT-KQV55-5JCVH-LWBIF',
          success: function (e) {
            // 骑手的经纬度
            console.log('经纬度数据：', e);
          }
        });
      }
    });
    wx.getLocation({
      success: (res) => {
        this.setData({
          latitude: 23.099994,
          longitude: 113.324520
        });
        var coors=[];
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',
          success: (res) => {
            console.log("09876546789",res);
           coors = res.data.result.routes[0].polyline
            for (var i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000
            }
            console.log(coors)
            //划线
            var b = [];
            for (var i = 0; i < coors.length; i = i + 2) {
              b[i / 2] = {
                latitude: coors[i],
                longitude: coors[i + 1]
              };
              console.log(b[i / 2])
            }
            this.setData({
              polyline: [{
                points: b,
                color: "#00ae20",
                width: 14,
                dottedLine: false
              }],
            })
          }
        })
      }
    });
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用测试~~~"
    }
  }
}

主要是利用的腾讯地图的规划路径的接口，获取到经纬度的数组、在地图上全部标记出来链接成线。

腾讯地图接口地址：https://lbs.qq.com/webservice_v1/guide-road.html