微信小程序+騰訊地圖開發(fā)實(shí)現(xiàn)路徑規(guī)劃繪制
現(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)文字功能
最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JS常用正則表達(dá)式總結(jié)【經(jīng)典】
這篇文章主要介紹了JS常用正則表達(dá)式,總結(jié)分析了常見的數(shù)字、字符、郵箱、身份證、電話等的正則驗(yàn)證技巧,需要的朋友可以參考下2017-05-05淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動
這篇文章主要介紹了淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動的方法及相關(guān)代碼,需要的朋友可以參考下2014-12-12在JavaScript中使用Promise.allSettled()的方法
Promise.allSettled()是一個游戲規(guī)則改變者,讓您等待所有承諾得到解決(解決或拒絕),然后根據(jù)結(jié)果采取行動,這篇文章主要介紹了如何在JavaScript中使用Promise.allSettled(),需要的朋友可以參考下2023-07-07解決循環(huán)中setTimeout執(zhí)行順序的問題
今天小編就為大家分享一篇解決循環(huán)中setTimeout執(zhí)行順序的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-06-06