亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

現(xiàn)象

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

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

解決方案

那我們只能用WebService API咯,

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

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

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

 

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

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

利用polyline繪制路徑

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

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

    })
    console.log('當(dāng)前l(fā)atitude:' + res.latitude)
    console.log('當(dāng)前l(fā)ongitude:' + res.longitude)
    console.log('當(dāng)前l(fā)atitude同步結(jié)果:' + that.data.now_Location.latitude)
    console.log('當(dāng)前l(fā)ongitude同步結(jié)果:' + that.data.now_Location.longitude)

    /********************** 從騰訊地圖WebService API請求導(dǎo)航路線坐標(biā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' // 默認(rèn)值
     },
     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)航路線點(diǎn)串如下:')
      console.log(res.data.result.routes[0].polyline)
      /** 獲取返回的方案路線坐標(biāo)點(diǎn)串并解壓 */
      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('路線坐標(biāo)點(diǎn)串解壓完畢!')
      console.log('路線坐標(biāo)點(diǎn)串解壓結(jié)果如下:')
      console.log(coors);
      /** 將解壓后的坐標(biāo)點(diǎn)串進(jìn)行拼接成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做出的格式化方案,直接實(shí)現(xiàn)了目標(biāo)對象的字符串形式,但是一開始沒注意數(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é)合起來就會達(dá)到跳2的效果
      }
      */

      console.log('路線坐標(biāo)點(diǎn)串格式化完畢!')
      console.log('路線坐標(biāo)點(diǎn)串格式化結(jié)果如下:')
      console.log(coors)
      console.log('已經(jīng)產(chǎn)生新的經(jīng)緯度數(shù)組coors_new如下:')
      console.log(coors_new)
      console.log('路線坐標(biāo)點(diǎn)串解壓后一共:' + coors.length + '個')
      console.log('路線坐標(biāo)點(diǎn)串轉(zhuǎn)換后一共:' + coors_new.length + '個')
      /** 開始同步路線坐標(biāo)集合+剩余距離+剩余時間數(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,//指定一系列坐標(biāo)點(diǎn),從數(shù)組第一項(xiàng)連線至最后一項(xiàng)
        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('當(dāng)前剩余時間 now_Duration同步結(jié)果:' + that.data.now_Duration+'分鐘')
      console.log('當(dāng)前剩余距離now_Distance同步結(jié)果:' + that.data.now_Distance+'米')
     }
    })

   },
  })
 }!

 

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

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

相關(guān)文章

  • 如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能

    如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能

    最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • swiper插件自定義切換箭頭按鈕

    swiper插件自定義切換箭頭按鈕

    這篇文章主要為大家詳細(xì)介紹了swiper插件自定義切換箭頭按鈕,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • JS常用正則表達(dá)式總結(jié)【經(jīng)典】

    JS常用正則表達(dá)式總結(jié)【經(jīng)典】

    這篇文章主要介紹了JS常用正則表達(dá)式,總結(jié)分析了常見的數(shù)字、字符、郵箱、身份證、電話等的正則驗(yàn)證技巧,需要的朋友可以參考下
    2017-05-05
  • JavaScript canvas仿代碼流瀑布

    JavaScript canvas仿代碼流瀑布

    這篇文章主要為大家詳細(xì)介紹了JavaScript canvas仿代碼流瀑布,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • npm后面的-S和-D參數(shù)舉例詳解

    npm后面的-S和-D參數(shù)舉例詳解

    這篇文章主要給大家介紹了關(guān)于npm后面的-S和-D參數(shù)舉例詳解的相關(guān)資料,文中還介紹了npm -s和-d的一些區(qū)別,對大家的學(xué)習(xí)或者工作具有一定的參考階級價值,需要的朋友可以參考下
    2024-01-01
  • 淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動

    淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動

    這篇文章主要介紹了淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動的方法及相關(guān)代碼,需要的朋友可以參考下
    2014-12-12
  • 在JavaScript中使用Promise.allSettled()的方法

    在JavaScript中使用Promise.allSettled()的方法

    Promise.allSettled()是一個游戲規(guī)則改變者,讓您等待所有承諾得到解決(解決或拒絕),然后根據(jù)結(jié)果采取行動,這篇文章主要介紹了如何在JavaScript中使用Promise.allSettled(),需要的朋友可以參考下
    2023-07-07
  • bootstrap多種樣式進(jìn)度條展示

    bootstrap多種樣式進(jìn)度條展示

    這篇文章主要為大家展示了bootstrap多種樣式進(jìn)度條,默認(rèn)進(jìn)度條、條紋進(jìn)度條等,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • js中創(chuàng)建對象的幾種方式示例介紹

    js中創(chuàng)建對象的幾種方式示例介紹

    JavaScript中的所有事物都是對象,本文為大家介紹下JS中創(chuàng)建對象的幾種方式,如原始方法、工廠方法等等
    2014-01-01
  • 解決循環(huán)中setTimeout執(zhí)行順序的問題

    解決循環(huán)中setTimeout執(zhí)行順序的問題

    今天小編就為大家分享一篇解決循環(huán)中setTimeout執(zhí)行順序的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-06-06

最新評論