关于地图map组件的路线轨迹

在项目需求中需要使用小程序map组件路线polyline，以前也有使用过map，但是在map上使用polyline还是第一次，赶紧来查查怎么用吧
查看官网介绍

polyline: [{
  //经纬度数组
  points: [{
    longitude: 113.3245211,
    latitude: 23.10229
  }, {
    longitude: 113.324520,
    latitude: 23.21229
  }],
  //线的颜色
  color:"#FF0000DD",
  //线的宽度
  width: 2,
  //是否虚线
  dottedLine: true
}],    

按照官网案例功能出来了，是不是简单明了，通俗易懂呢。但是总感觉有点瑕疵，路线轨迹是根据起始点和终点之间经过的线路得来的，不可能是写死的，开发者也不会再地图上去找这些经纬度，那这些经纬度怎么得来呢？微信小程序的map组件没有这样的API可以用

第三方的地图软件都有路线轨迹，可以借助第三方的地图API来实现，这次项目中运用的是高德地图，那就找找高德地图的API还实现这个功能。

高德地图：路线规划=>路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。这里我只运用一种出行场景（驾车）。看代码

var myAmapFun = new amapFile.AMapWX({key: '高德Key'});
myAmapFun.getDrivingRoute({
   origin: '116.481028,39.989643',//起始点经纬度
   destination: '116.434446,39.90816', //终点经纬度
   success: function(data){
      var points = [];
      if (data.paths && data.paths[0] && data.paths[0].steps) {
        var steps = data.paths[0].steps;
        for (var i = 0; i < steps.length; i++) {
          var poLen = steps[i].polyline.split(';');
          for (var j = 0; j < poLen.length; j++) {
            points.push({
              longitude: parseFloat(poLen[j].split(',')[0]),
              latitude: parseFloat(poLen[j].split(',')[1])
            })
          }
        }
      }    
      that.setData({
        polyline: [{
          points: points,
          color: "#FF6601",
          width: 3
        }],
      })
   }
})

完美解决

 

BY: Fym