微信小程序实现路径规划

通勤助手小程序使用了线路规划这一功能，借助腾讯地图的

WebService API中的路线规划服务和划线可实现这一功能。index.wxml文件如下，点击路线形成规划图。index.js文件如下

1. <map  id="map"  polyline="{{polyline}}" markers="{{markers}}" include-points="{{markers}}" style="width: 100%; height: 700rpx;" ></map>

3. <button bindtap="end">路线</button>

   index.js文件如下

   
   

   1. var coors

   2. var that2

   5. Page({

   6.  data: {

   7.    polyline: [],

   8.    markers: [{

   9.      iconPath: "mark.png",      

   10.      latitude: 23.362490,

   11.      longitude: 116.715790,

   12.      width: 25,

   13.      height: 25

   14.    },

   15.      {

   16.        iconPath: "mark.png",

   17.        latitude: 23.37228,

   18.        longitude: 116.75498,

   19.        width: 25,

   20.        height: 25

   21.      }],

   24.  },

   25.  onReady: function () {

   26.    that2 = this

   27.    wx.request({

   28.      url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO',

   30.      success: function (res) {

   33.        coors = res.data.result.routes[0].polyline

   35.        for (var i = 2; i < coors.length; i++)

   36.        { coors[i] = coors[i - 2] + coors[i] / 1000000 }

   37.        console.log(coors)

   38.      }

   40.    })

   42.    },

   50.  end: function () {

   53. var b=[]

   54.    for (var i = 0; i < coors.length; i=i+2)

   55. {

   56.      b[i / 2] = {

   57.        latitude: coors[i],longitude:coors[i+1]}

   58.  console.log(b[i/2])

   59. }

   60. console.log(b.length)

   63.  that2.setData({

   64.    polyline: [{

   65.      points: b,

   66.      color: "#99FF00",

   67.      width: 4,

   68.      dottedLine: false

   69.    }],

   72.  })

   73. }

   75. })

   定义两点坐标并mark标注，通过api获取路径规划路线，返回的压缩后的经纬度，解压缩后出现成对的经纬度，再转换为polyline划线的格式。