微信小程序实现路径规划

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

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

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

3. <buttonbindtap="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划线的格式。