国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

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

2020-03-21 15:55:43
字體:
來源:轉載
供稿:網友

現象

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

微信小程序,騰訊地圖,路徑規劃

更糟糕的是即便你內置微信小程序JavaScript SDK,它目前為止也不能給你相應的返回導航路徑中所有坐標集合方法實現,不信你看介紹 

微信小程序,騰訊地圖,路徑規劃

解決方案

那我們只能用WebService API咯,

微信小程序,騰訊地圖,路徑規劃

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

微信小程序,騰訊地圖,路徑規劃

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

微信小程序,騰訊地圖,路徑規劃

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

微信小程序,騰訊地圖,路徑規劃

哼哼,狀態穩如老狗 @_@ 

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

利用polyline繪制路徑

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

/**  * 獲取當前位置標記在地圖上并且利用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+'米')     }    })   },  }) }!

微信小程序,騰訊地圖,路徑規劃

至此路徑規劃告一段落

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 巴林左旗| 大荔县| 江都市| 扶绥县| 泽州县| 昌江| 甘洛县| 遂溪县| 梁河县| 新竹县| 长乐市| 家居| 阿拉尔市| 多伦县| 盖州市| 麦盖提县| 政和县| 高青县| 本溪市| 凉山| 桃源县| 佳木斯市| 潞西市| 广西| 灯塔市| 怀远县| 汉寿县| 英山县| 紫云| 盈江县| 南郑县| 奇台县| 阿图什市| 五河县| 西青区| 皋兰县| 三河市| 南阳市| 河间市| 商丘市| 上虞市|