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

更糟糕的是即便你內(nèi)置微信小程序JavaScript SDK,它目前為止也不能給你相應的返回導航路徑中所有坐標集合方法實現(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請求導航路線坐標集合用于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('導航路線點串如下:')
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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能
最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
在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

