uniapp小程序使用高德地圖api實(shí)現(xiàn)路線規(guī)劃的示例代碼
更新時(shí)間：2023年01月10日 15:18:20 作者：書(shū)中楓葉
路線規(guī)劃常用于出行路線的提前預(yù)覽，我們提供4種類(lèi)型的路線規(guī)劃，分別為：駕車(chē)、步行、公交和騎行，滿足各種的出行場(chǎng)景，這篇文章主要介紹了uniapp小程序使用高德地圖api實(shí)現(xiàn)路線規(guī)劃,需要的朋友可以參考下
路線規(guī)劃
簡(jiǎn)介
路線規(guī)劃常用于出行路線的提前預(yù)覽，我們提供4種類(lèi)型的路線規(guī)劃，分別為：駕車(chē)、步行、公交和騎行，滿足各種的出行場(chǎng)景。
高德開(kāi)放平臺(tái)
本例是駕車(chē)路線規(guī)劃功能和位置選擇地圖api:chooseLocation
示例：
1、在頁(yè)面的 js 文件中，實(shí)例化 AMapWX 對(duì)象，請(qǐng)求進(jìn)行駕車(chē)路線規(guī)劃。
首先，引入 amap-wx.js 文件（amap-wx.js 從相關(guān)下載頁(yè)面下載的 zip 文件解壓后得到）。
import amapFile from "@/libs/amap-wx.js";
然后在 onLoad 實(shí)例化 AMapWX 對(duì)象
onLoad() {
this.myAmapFunT = new amapFile.AMapWX({
key: 你申請(qǐng)的key
})
},最后生成請(qǐng)求進(jìn)行駕車(chē)路線規(guī)劃數(shù)據(jù)
/**
*@author ZY
*@date 2023/1/9
*@Description:生成規(guī)劃路線
*@param {string} start 開(kāi)始位置
*@param {string} end 結(jié)束位置
*@param {number} strategy 10 默認(rèn)多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
*
10，返回結(jié)果會(huì)躲避擁堵，路程較短，盡量縮短時(shí)間，與高德地圖的默認(rèn)策略也就是不進(jìn)行任何勾選一致
* 4，躲避擁堵，但是可能會(huì)存在繞路的情況，耗時(shí)可能較長(zhǎng)
2，距離優(yōu)先，僅走距離最短的路線，但是可能存在穿越小路/小區(qū)的情況
*/
getPlanningRoute(start, end, strategy = 10) {
let that = this
uni.showLoading({
title: '加載中'
});
that.myAmapFunT.getDrivingRoute({
origin: start,
destination: end,
strategy: strategy, //備選方案
success: function(data) {
// console.log('所有路徑',data)
if (data.paths && data.paths[0] && data.paths[0].steps) {
// 默認(rèn) 10 會(huì) 對(duì)返回多條路徑的方案 按照時(shí)間短的
let goodRouter = data.paths.sort((a, b) => {
return a.duration - b.duration
})[0]
that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里'
that.duration = '大約' + (goodRouter.duration / 60).toFixed(2) + '分鐘'
let steps = goodRouter.steps
let points = []
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])
})
}
}
that.polyline = [{
points: points,
color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' :
'#ee6b06',
width: 8,
}]
}
uni.hideLoading();
},
fail: function(info) { //失敗回調(diào)
console.log('路線規(guī)劃失敗')
console.log(info)
uni.hideLoading();
uni.showToast({
title: '路線規(guī)劃失敗',
icon: 'error'
});
},
})
},
2.完整源碼組件
<template>
<view class="content">
<view class="back-button" @click="toBack">
<image src="http://img.wisdomtaxi.com/toBack.png" style="width: 100%; height: 100%;"></image>
</view>
<map class="order-map" :latitude="startPoint.latitude" :longitude="startPoint.longitude" show-location
:polyline="polyline" @markertap="markertap" :key="polyline.length + new Date().getTime()"
:markers="markers">
<cover-view slot="callout">
<block v-for="(item,index) in markers" :key="index">
<cover-view class="customCallout" :marker-id="item.id">
<cover-view class="customCalloutContent">
{{item.title}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
<view class="order-box">
<view class="search-start" v-if="endPoint.address">
<view class="custom-style" v-for="item in btnList" :key="item.value"
:class="{active:flag === item.value}" @click="selectRouteType(item.value)">
{{item.name}}
</view>
</view>
<view class="search-start" v-if="distance || duration">
<u-icon name="file-text-fill" color="#FFA500" size="17"></u-icon>
<view class="start-name">
距離：{{distance}} 時(shí)間：{{duration}}
</view>
</view>
<view class="search-start">
<u-icon name="map-fill" color="#33a63b" size="17"></u-icon>
<view class="start-name">
您將在 <text style="color: #33a63b">{{startPoint.name | fmtEndAddr}}</text> 上車(chē)
</view>
</view>
<view class="search-start" v-if="endPoint.name">
<u-icon name="map-fill" color="#ee642b" size="17"></u-icon>
<view class="start-name">
{{endPoint.name|fmtEndAddr}}
</view>
</view>
<view class="search-box" @click="openChooseLocation">
<u-icon name="search" color="#ffa602" size="23"></u-icon>
<view class="search-placeholder">
請(qǐng)選擇目的地
</view>
</view>
<view v-if="endPoint.name" @click="submitToDriver" class="send-btn">
發(fā)送給司機(jī)
</view>
</view>
</view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import amapFile from "@/libs/amap-wx.js";
export default {
components: {
uniIcons
},
data() {
return {
markers: [],
tripInfo: {},
polyline: [],
startPoint: {
latitude: 26.56045894387685, //緯度
longitude: 106.68005128661751, //經(jīng)度
name: '',
address: ''
},
endPoint: {},
myAmapFunT: null,
distance: 0, //距離
duration: 0, //時(shí)間
flag: 10,
btnList: [{
name: '推薦',
value: 10
},
{
name: '躲避擁堵',
value: 4
},
{
name: '距離短',
value: 2
},
]
}
},
filters: {
fmtEndAddr(val) {
if (val === null || val === '' || val === undefined) {
return '未知地址';
}
return val;
},
},
onLoad() {
this.myAmapFunT = new amapFile.AMapWX({
key: 你申請(qǐng)的key
})
this.getCurrentLocation();
},
methods: {
//返回
toBack() {
uni.navigateBack({});
},
//獲取當(dāng)前定位
getCurrentLocation() {
let that = this
uni.getLocation({
type: 'gcj02',
success: function(res) {
// console.log('當(dāng)前：' , res);
// console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
// console.log('當(dāng)前位置的緯度：' + res.latitude);
that.startPoint.longitude = res.longitude;
that.startPoint.latitude = res.latitude;
that.getAddress(that.startPoint.longitude + ',' + that.startPoint.latitude)
}
});
},
// 解析地址
getAddress(loc) {
var that = this;
var myAmapFun = this.myAmapFunT
if (loc !== null && loc !== '' && loc !== undefined) {
myAmapFun.getRegeo({
iconPath: 'http://img.wisdomtaxi.com/amap_icon.png',
width: '37.5rpx',
height: '37.5rpx',
location: loc,
success: function(data) { //成功回調(diào)
// console.log('地址解析',data)
that.startPoint.name = data[0].name
that.startPoint.address = data[0].desc
that.initMap()
},
fail: function(info) { //失敗回調(diào)
console.log(info)
},
});
}
},
//初始化地圖數(shù)據(jù)
initMap() {
this.markers.push({
id: 1,
latitude: this.startPoint.latitude, //緯度
longitude: this.startPoint.longitude, //經(jīng)度
iconPath: '/static/images/home/start.png', //顯示的圖標(biāo)
rotate: 0, // 旋轉(zhuǎn)度數(shù)
width: 30, //寬
height: 30, //高
title: this.startPoint.name, //標(biāo)注點(diǎn)名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS",
},
}, )
},
/**
*@author ZY
*@date 2023/1/9
*@Description:選擇位置
*@param {Object} opt https://uniapp.dcloud.net.cn/api/location/location.html
*
opt : {
latitude Number 否 目標(biāo)地緯度
longitude Number 否 目標(biāo)地經(jīng)度
}
*/
openChooseLocation(opt) {
let that = this
uni.chooseLocation({
latitude: opt?.latitude || that.startPoint.latitude,
longitude: opt?.longitude || that.startPoint.longitude,
success: function(res) {
// console.log(res)
// console.log('位置名稱(chēng)：' + res.name);
// console.log('詳細(xì)地址：' + res.address);
// console.log('緯度：' + res.latitude);
// console.log('經(jīng)度：' + res.longitude);
if (!res.name) {
return uni.showToast({
title: '請(qǐng)重新選擇位置',
icon: 'none'
});
}
//設(shè)置終點(diǎn)
that.endPoint = {
longitude: res.longitude,
latitude: res.latitude,
name: res.name,
address: res.address
}
//設(shè)置終點(diǎn)標(biāo)記
that.markers[1] = {
id: 2,
latitude: res.latitude, //緯度
longitude: res.longitude, //經(jīng)度
iconPath: '/static/images/home/endd.png', //顯示的圖標(biāo)
rotate: 0, // 旋轉(zhuǎn)度數(shù)
width: 30, //寬
height: 30, //高
title: res.name, //標(biāo)注點(diǎn)名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
}
let start = that.startPoint.longitude + ',' + that.startPoint.latitude
let end = res.longitude + ',' + res.latitude
//每次選取位置完成后都會(huì)默認(rèn) 10 策略
that.flag = 10
//生成規(guī)劃路線
that.getPlanningRoute(start, end, 10)
},
fail: function(info) { //失敗回調(diào)
console.log('調(diào)取失敗')
console.log(info)
},
})
},
// 按鈕選擇策略
selectRouteType(idx) {
this.flag = idx
let start = this.startPoint.longitude + ',' + this.startPoint.latitude
let end = this.endPoint.longitude + ',' + this.endPoint.latitude
this.getPlanningRoute(start, end, idx)
},
/**
*@author ZY
*@date 2023/1/9
*@Description:生成規(guī)劃路線
*@param {string} start 開(kāi)始位置
*@param {string} end 結(jié)束位置
*@param {number} strategy 10 默認(rèn)多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
*
10，返回結(jié)果會(huì)躲避擁堵，路程較短，盡量縮短時(shí)間，與高德地圖的默認(rèn)策略也就是不進(jìn)行任何勾選一致
* 4，躲避擁堵，但是可能會(huì)存在繞路的情況，耗時(shí)可能較長(zhǎng)
2，距離優(yōu)先，僅走距離最短的路線，但是可能存在穿越小路/小區(qū)的情況
*/
getPlanningRoute(start, end, strategy = 10) {
let that = this
uni.showLoading({
title: '加載中'
});
that.myAmapFunT.getDrivingRoute({
origin: start,
destination: end,
strategy: strategy, //備選方案
success: function(data) {
// console.log('所有路徑',data)
if (data.paths && data.paths[0] && data.paths[0].steps) {
// 默認(rèn) 10 會(huì) 對(duì)返回多條路徑的方案 按照時(shí)間短的
let goodRouter = data.paths.sort((a, b) => {
return a.duration - b.duration
})[0]
that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里'
that.duration = '大約' + (goodRouter.duration / 60).toFixed(2) + '分鐘'
let steps = goodRouter.steps
let points = []
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])
})
}
}
that.polyline = [{
points: points,
color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' :
'#ee6b06',
width: 8,
}]
}
uni.hideLoading();
},
fail: function(info) { //失敗回調(diào)
console.log('路線規(guī)劃失敗')
console.log(info)
uni.hideLoading();
uni.showToast({
title: '路線規(guī)劃失敗',
icon: 'error'
});
},
})
},
// 點(diǎn)擊標(biāo)記點(diǎn)
markertap(e) {
let opt = this.markers.find(el => {
return el.id === e.detail.markerId
})
this.openChooseLocation(opt)
},
// 提交給司機(jī)
submitToDriver() {
let p = {}
p.idCard = uni.getStorageSync('driverInfo').idCard || ''
p.startLocation = this.startPoint.longitude + ',' + this.startPoint.latitude
p.startAddr = this.startPoint.name || '未知'
p.endLocation = this.endPoint.longitude + ',' + this.endPoint.latitude
p.endAddr = this.endPoint.name || '未知'
p.plan = this.flag || 10
p.locations = this.polyline[0].points || []
if (!p.idCard) {
return uni.showToast({
title: '司機(jī)信息獲取失敗',
icon: 'none'
});
}
uni.showLoading({
title: '提交中'
});
let that = this
this.request('api_sendDestination', p).then(res => {
uni.hideLoading();
uni.showToast({
title: '發(fā)送成功'
})
setTimeout(()=>{
that.toBack()
},1000)
}).catch(err => {
console.log(err)
uni.hideLoading();
uni.showToast({
title: '發(fā)送失敗',
icon: 'error'
})
})
}
},
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
text-align: center;
align-content: center;
background: #f5f5f9;
height: 1600rpx;
}
.back-button {
z-index: 9;
position: fixed;
top: 95rpx;
left: 30rpx;
height: 50rpx;
width: 50rpx;
border-radius: 50%;
background-color: #FFA500;
/* box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2); */
}
.order-map {
width: 100%;
height: 100%;
}
.order-box {
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 100%;
//height: 435rpx;
text-align: left;
background-color: #FFFFFF;
border-top-right-radius: 10rpx;
border-top-left-radius: 10rpx;
box-sizing: border-box;
padding: 18rpx;
padding-bottom: 80rpx;
box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2);
.send-btn {
margin-top: 30rpx;
width: 100%;
color: white;
background-color: #ffa602;
padding: 0 24rpx;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
box-sizing: border-box;
border-radius: 12rpx;
text-align: center;
}
/*box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2);*/
.search-start {
font-size: 30rpx;
margin: 18rpx 0;
padding-left: 15rpx;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
.start-name {
width: 550rpx;
padding-left: 10rpx;
overflow: hidden;
/*文本不會(huì)換行*/
white-space: nowrap;
/*當(dāng)文本溢出包含元素時(shí)，以省略號(hào)表示超出的文本*/
text-overflow: ellipsis;
}
.custom-style {
margin-right: 10rpx;
border-radius: 6rpx;
border: 1rpx solid #ebedf0;
font-size: 24rpx;
padding: 8rpx 24rpx;
&:last-child {
margin-right: 0;
}
&.active {
color: #FFFFFF;
background-color: #ffa602;
border-color: #ffa602;
}
}
}
.search-box {
background-color: #f3f3f3;
border-radius: 36rpx;
height: 80rpx;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0 25rpx;
.search-placeholder {
font-size: 28rpx;
color: #bbb9b9;
padding-left: 15rpx;
}
}
}
.addH {
height: 420rpx;
/*+100*/
}
.row {
display: flex;
flex-direction: row;
}
.bot {
margin-bottom: 10rpx;
}
.license {
position: relative;
left: 30rpx;
height: 110rpx;
font-weight: bold;
font-size: 38rpx;
line-height: 130rpx;
letter-spacing: 1.125rpx;
/* border: 0.01rem solid #555555; */
}
.time-icon {
height: 16rpx;
width: 16rpx;
position: relative;
left: 190rpx;
top: 59rpx;
}
.time-text {
height: 110rpx;
line-height: 130rpx;
position: relative;
left: 200rpx;
font-size: 30rpx;
color: #666666;
/* border: 0.01rem solid #555555; */
}
.route-icon {
height: 12rpx;
width: 12rpx;
position: relative;
left: 42rpx;
top: 30rpx;
}
.route-text {
height: 65rpx;
width: 478rpx;
line-height: 65rpx;
position: relative;
left: 50rpx;
font-size: 30rpx;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* border: 0.01rem solid #555555; */
}
.amt-box {
width: calc(100% - 558rpx);
margin-left: 40rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
/* border: 1rpx solid #555555; */
}
.amt-icon {
margin-top: 5rpx;
line-height: 65rpx;
height: 20rpx;
width: 20rpx;
}
.amt {
margin-left: 10rpx;
line-height: 65rpx;
/*line-height: 80rpx;*/
font-size: 30rpx;
color: #666666;
}
.todo {
position: relative;
height: 165rpx;
width: 640rpx;
margin-left: 30rpx;
border-top: 0.375rpx solid #E9EAEC;
}
.todo-item {
height: 100%;
width: 50%;
text-align: center;
align-content: center;
/* border: 0.01rem solid #555555; */
}
.todo-item>image {
height: 60rpx;
width: 60rpx;
margin-top: 30rpx;
}
.todo-item>view {
color: #3F3F3F;
font-size: 30rpx;
letter-spacing: 0.375rpx;
/* border: 0.01rem solid #555555; */
}
</style>
<style>
/* *************************************** */
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
padding: 5px 10px;
}
.customCalloutContent {
font-size: 20rpx;
word-wrap: break-word;
}
</style>到此這篇關(guān)于uniapp小程序使用高德地圖api實(shí)現(xiàn)路線規(guī)劃的文章就介紹到這了,更多相關(guān)uniapp高德地圖路線規(guī)劃內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
![使用apply方法處理數(shù)組的三個(gè)技巧[譯]](http://img.jbzj.com/images/xgimg/bcimg0.png)
使用apply方法處理數(shù)組的三個(gè)技巧[譯]
本文要講的是使用apply方法處理數(shù)組的三個(gè)技巧，需要的朋友可以參考下2012-09-09
今天小編就為大家分享一篇layer提示框添加多個(gè)按鈕選擇的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例
這篇文章主要與大家分享一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例，很簡(jiǎn)單，但很實(shí)用，大家可以看看2014-09-09
原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果
輪播效果是老生常談的話題，今天小編通過(guò)實(shí)例代碼給大家分享原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2018-09-09
Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁(yè)面的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript的介紹和簡(jiǎn)單語(yǔ)法(示例代碼)
JavaScript是一種廣泛使用的腳本語(yǔ)言,為網(wǎng)頁(yè)添加交互性和動(dòng)態(tài)功能提供了強(qiáng)大的支持,在本文中,我們將深入了解JavaScript的基本概念和用法,包括它在HTML中的書(shū)寫(xiě)位置、注釋和結(jié)束符的使用,以及一種常用的函數(shù)——alert語(yǔ)句,感興趣的朋友一起看看吧2023-09-09
在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測(cè)試成功了，在谷歌瀏覽中沒(méi)有測(cè)試成功，其他瀏覽器沒(méi)有測(cè)試。2011-02-02
基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
當(dāng)option特別多時(shí)，一般的下拉框選擇起來(lái)就有點(diǎn)力不從心了，所以使用multiselect是個(gè)很好的選擇。在網(wǎng)上找了半天找到了解決方案，具體實(shí)現(xiàn)代碼大家參考下本文吧2017-07-07
JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12