最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制

 更新時間:2019年05月22日 10:11:42   作者:宿雪Plus  
這篇文章主要介紹了微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

現(xiàn)象

我們想用微信小程序?qū)崿F(xiàn)在map>組件上自定義顯示導(dǎo)航路徑,但是目前為止官方并未給出相應(yīng)的方法實現(xiàn),map>組件確實有繪制點對點連線的屬性polyline,但是呢我們沒有一系列的坐標集合也是畫不出一條路徑的,

更糟糕的是即便你內(nèi)置微信小程序JavaScript SDK,它目前為止也不能給你相應(yīng)的返回導(dǎo)航路徑中所有坐標集合方法實現(xiàn),不信你看介紹

解決方案

那我們只能用WebService API咯,

但是不要高興的太早,根據(jù)文檔,我們要的接口參數(shù)是醬紫的

那么我們開始寫(下面是菜雞版代碼,非禮勿視)

wx.request()參數(shù)的data部分對”from”/”to”賦值不能采用慣用手法了,你會發(fā)現(xiàn)換了好幾種方式依然不能如意,要么請求參數(shù)非法,要么語法編譯又過不了,沒辦法,最后只能使用絕招了

 

哼哼,狀態(tài)穩(wěn)如老狗 @_@

ok,到此為止,我們已經(jīng)拿到我們想要的坐標集合了,那么接下來就是提取坐標數(shù)組,然后給polyline繪制的問題了

利用polyline繪制路徑

什么都不說了,直接上代碼:

/**
  * 獲取當前位置標記在地圖上并且利用polyline繪制路徑
  */
 now_LocationTap: function () {
  var that = this
  /**
   * 初始化當前地圖標記信息
   */
  wx.getLocation({
   type: 'gcj02', // 默認為 wgs84 返回 gps 坐標,gcj02 返回可用于 wx.openLocation 的坐標
   success: function (res) {
    console.log('當前位置數(shù)據(jù)Object如下:')
    console.log(res)
    /** 開始同步數(shù)據(jù) */
    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('當前l(fā)atitude:' + res.latitude)
    console.log('當前l(fā)ongitude:' + res.longitude)
    console.log('當前l(fā)atitude同步結(jié)果:' + that.data.now_Location.latitude)
    console.log('當前l(fā)ongitude同步結(jié)果:' + that.data.now_Location.longitude)

    /********************** 從騰訊地圖WebService API請求導(dǎo)航路線坐標集合用于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',  //結(jié)合路況的最優(yōu)方式
      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('導(dǎo)航路線點串如下:')
      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('路線坐標點串解壓結(jié)果如下:')
      console.log(coors);
      /** 將解壓后的坐標點串進行拼接成polyline想要的樣子 */
      var coors_new=[] //記住微信小程序聲明一個數(shù)組這樣寫
      for(var j = 0; j < coors.length; j++){
      coors_new.push({
      latitude: parseFloat(coors[j]),
      longitude: parseFloat(coors[j+1])
     })
     j++;
    } 

      /* 自己想的針對polyline的points做出的格式化方案,直接實現(xiàn)了目標對象的字符串形式,但是一開始沒注意數(shù)據(jù)類型的問題,隨后試了好幾種方案都不如意,最終查看了高德地圖的開發(fā)方案后恍然大悟,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循環(huán)的自動+1,結(jié)合起來就會達到跳2的效果
      }
      */

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

   },
  })
 }!

 

至此路徑規(guī)劃告一段落

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論

扎鲁特旗| 墨脱县| 义马市| 区。| 沧源| 渭南市| 义乌市| 新疆| 沙湾县| 定襄县| 马尔康县| 岳阳县| 高邮市| 麻栗坡县| 南召县| 湟中县| 卢湾区| 财经| 民县| 华宁县| 金沙县| 台北县| 威信县| 勐海县| 禄丰县| 西吉县| 桃源县| 宜阳县| 上饶县| 罗城| 临高县| 高青县| 汶川县| 全南县| 峡江县| 五峰| 嘉禾县| 象山县| 蛟河市| 昆明市| 庆元县|