小demo大學外賣小程序，不太建議完全照搬，須要的可以在上面完成拓展，不喜勿噴！！！
這個功能最重要的就是路線規劃，路線兩端分別是點外賣的人，店家，送外賣的騎手，店家的位置，前端插口直接才能領到給后端，而用戶的位置，因為地址是自己填的，因而后端也可以輕松的領到地址轉為經經度。那騎手的位置呢？這就要從第三方貨運插口去獲取了，那得看實際的項目接入的是圓通，美團還是噠噠或則其他哪些。并且這個小demo也不須要這么復雜，即使沒有騎手位置，那就簡單模擬一下好了。首先在小程序上創建一張地圖下來：
css
page,html,body {
width:100%;
height:100%;
}
.map-container {
width:100%;
height:100%;
}
.gaode-map {
width:100%;
height:100%;
}js文件
const gaodeMap = require('../../amap-wx.js'); // 引入高德sdk
const map = new gaodeMap.AMapWX({
key: 'xxxxxxxx' // 高德申請的key
});
Page({
data: {
longitude: 116.397128, // 給個默認的經緯度 定位到北京天安門
latitude: 39.916527, //
distance: 0, // 騎手距離
cost: 0, // 大概時間
polyline: [], // 存放路線的經緯度
markers: [{ // 自己設置的三個mark標記，分別是 商家，用戶，騎手
iconPath: "/images/shangjia.png",
id: 0,
latitude: 39.916527,
longitude: 116.397128,
width: 20,
height: 23
}, {
iconPath: "/images/weizhi.png",
id: 1,
latitude: 31.23035,
longitude: 121.473717,
width: 20,
height: 23
}, {
iconPath: "/images/qishou.png",
id: 2,
latitude: 31.23035,
longitude: 121.473717,
width: 20,
height: 23
}],
},
// 獲取用戶位置信息
getUserLocation() {
let that = this
wx.getLocation({
success: (res) => {
that.setData({
longitude: res.longitude,
latitude: res.latitude,
['markers[0].latitude']: res.latitude,
['markers[0].longitude']: res.longitude
}, () => {
map.getRidingRoute({
origin: '121.473717,31.23035', // 路線規劃的起點 隨便在我附近搜的位置轉的經緯度
destination: `${res.longitude},${res.latitude}`, // 目的地經緯度
success: (data) => {
let points = [];
let distance = 0
let cost = 0
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
if (data.paths[0] && data.paths[0].distance) {
distance = data.paths[0].distance + '米'
}
if (data.paths[0] && data.paths[0].duration) {
cost = parseInt(data.paths[0].duration / 60) + '分鐘'
}
that.setData({
polyline: [{
points: points,
color: "#0091ff",
width: 6
}],
distance,
cost,
['markers[2].longitude']: points[120].longitude,
['markers[2].latitude']: points[120].latitude
})
let tempNum = 0
// 設置一個定時器根據路線規劃上的經緯度每100毫秒前進一步
let timer = setInterval(()=>{
if(tempNum >= points.length){
// 跑完了規劃路線就停止
clearInterval(this.data.timer)
}
if(!this.data.timer){
// 將定時器設置為全局的，方便退出組件時銷毀
this.setData({
timer:timer
})
}
//
this.setData({
['markers[2].longitude']: points[++tempNum].longitude,
['markers[2].latitude']: points[++tempNum].latitude
})
},100)
}
})
})
},
})
},
// 用戶授權
userAuth() {
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success: () => {
// 同意授權位置
this.getUserLocation()
},
fail: () => {
wx.showModal({
content: '拒絕授權將無法獲取您的位置，請授權。',
showCancel: false,
success: (r) => {
if (r.confirm) {
// 打開設置頁面讓用戶手動開啟權限
wx.openSetting({
success:(v)=>{
}
})
}
}
})
}
})
}
},
})
},
onLoad: function () {
},
onShow:function(){
this.userAuth()
},
onUnload:function(){
clearInterval(this.data.timer)
}
})s文件50行之下的那段代碼是直接從高德文檔copy過來的，順便更改了一下。當調用高德的函數以后，傳入兩個點的經經度，他會返回一長串鏈表方式的經經度給我們：
就是我們須要的路線的經經度，在代碼中經過for循環去取出經經度估算，就可以領到預計達到時間以及路程長短，這個估算并不難，但是高德文檔本身就有，里面那段估算的代碼就是現成的。為了模擬出那種騎手聯通的療效，我在下邊加了一個定時器，每100納秒讓電動車圖標按照路線的經經度聯通一下，但實際情況的話，騎手的位置應當是由其他插口給后端才對，這兒只是為了瞧瞧療效，僅此而已。地圖上的那條路線，只是拿來給用戶看的而已大學外賣小程序，由于他人在送外賣的時侯，不止送一份，就會去給他人，因而在地圖上獲取騎手位置的時侯，人家可能壓根不在那條線上，也可能是走其他大路穿插，這都是正常的。還有就是騎手的位置也并非實時更新，我看美團的似乎就不是實時更新，而是隔一段時間更新一次，后端做個協程就好了，簡單粗魯。以上代碼示例并非真實項目，只是為了看實現療效寫的小示例而已。
免責聲明：部分文章信息來源于網絡以及網友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內容的真實性，如本站文章和轉稿涉及版權等問題，請作者在及時聯系本站，我們會盡快為您處理。
