微信小程序+騰訊地圖開發實現路徑規劃繪制

/**
  * 獲取當前位置標記在地圖上并且利用polyline繪制路徑
  */
 now_LocationTap: function () {
  var that = this
  /**
   * 初始化當前地圖標記信息
   */
  wx.getLocation({
   type: 'gcj02', // 默認為 wgs84 返回 gps 坐標，gcj02 返回可用于 wx.openLocation 的坐標
   success: function (res) {
    console.log('當前位置數據Object如下：')
    console.log(res)
    /** 開始同步數據 */
    that.setData({
     now_Location: {
      latitude: res.latitude,
      longitude: res.longitude,
     },
     /**初始化地圖標記點附近車輛信息 */
     markers: [
      {
       iconPath: '/resources/wait/car.png',
       width: 70,
       height: 70,
       latitude: res.latitude,
       longitude: res.longitude
      }
     ]

    })
    console.log('當前latitude:' + res.latitude)
    console.log('當前longitude:' + res.longitude)
    console.log('當前latitude同步結果:' + that.data.now_Location.latitude)
    console.log('當前longitude同步結果:' + that.data.now_Location.longitude)

    /********************** 從騰訊地圖WebService API請求導航路線坐標集合用于point_Array折線連接 */
    var now_Location = String(res.latitude + ',' + res.longitude)
    var end_Location = String(that.data.endLocation.latitude + ',' + that.data.endLocation.longitude)
    wx.request({
     url: 'https://apis.map.qq.com/ws/direction/v1/driving/', //連接接口地址

     data: {
      from: now_Location,
      to: end_Location,
      policy: 'REAL_TRAFFIC',  //結合路況的最優方式
      key: '騰訊地圖KEY',

     },
     header: {
      'content-type': 'application/json' // 默認值
     },
     success: function (res) {
      console.log(res.data)
      console.log('剩余距離：' + res.data.result.routes[0].distance + '米')
      console.log('剩余時間：' + res.data.result.routes[0].duration + '分鐘')
      console.log('導航路線點串如下：')
      console.log(res.data.result.routes[0].polyline)
      /** 獲取返回的方案路線坐標點串并解壓 */
      var 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('路線坐標點串解壓完畢!')
      console.log('路線坐標點串解壓結果如下：')
      console.log(coors);
      /** 將解壓后的坐標點串進行拼接成polyline想要的樣子 */
      var coors_new=[] //記住微信小程序聲明一個數組這樣寫
      for(var j = 0; j < coors.length; j++){
      coors_new.push({
      latitude: parseFloat(coors[j]),
      longitude: parseFloat(coors[j+1])
     })
     j++;
    } 

      /* 自己想的針對polyline的points做出的格式化方案，直接實現了目標對象的字符串形式，但是一開始沒注意數據類型的問題，隨后試了好幾種方案都不如意，最終查看了高德地圖的開發方案后恍然大悟，Array.push({latitude:'',longitude:''}),簡直完美！
      for (var i = 0, j = 0; i < coors.length - 2, j < coors.length/2; i++,j++)
      { 
       coors[i] = String('{latitude:'+String(coors[i])+','+'longitude:'+String(coors[i + 1])+'}') ;
       coors_new[j] = coors[i];
       i+=1;  //此處注意不+2的原因是：還有for循環的自動+1，結合起來就會達到跳2的效果
      }
      */

      console.log('路線坐標點串格式化完畢！')
      console.log('路線坐標點串格式化結果如下：')
      console.log(coors)
      console.log('已經產生新的經緯度數組coors_new如下：')
      console.log(coors_new)
      console.log('路線坐標點串解壓后一共：' + coors.length + '個')
      console.log('路線坐標點串轉換后一共：' + coors_new.length + '個')
      /** 開始同步路線坐標集合+剩余距離+剩余時間數據 */
      that.setData({
       now_Duration: res.data.result.routes[0].duration,  //剩余時間
       now_Distance: res.data.result.routes[0].distance,  //剩余距離
       polyline_Object: [{
        points: coors_new,//指定一系列坐標點，從數組第一項連線至最后一項
        color: "#FF0000DD",
        width: 2,
        dottedLine: true
       }],
      })
      console.log('更新points經緯度數組如下：')
      console.log(that.data.polyline_Object[0].points)
      console.log('更新polyline_Object如下：')
      console.log(that.data.polyline_Object)
      console.log('當前剩余時間 now_Duration同步結果:' + that.data.now_Duration+'分鐘')
      console.log('當前剩余距離now_Distance同步結果:' + that.data.now_Distance+'米')
     }
    })

   },
  })
 }！