|
|
路线规划
简介
路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。 高德开放平台
本例是驾车路线规划功能和位置选择地图api:chooseLocation
<hr/>示例：
位置选择和路线规划
1、在页面的 js 文件中，实例化 AMapWX 对象，请求进行驾车路线规划。
首先，引入 amap-wx.js 文件（amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）。
import amapFile from &#34;@/libs/amap-wx.js&#34;;
然后在 onLoad 实例化 AMapWX 对象
onLoad() {
this.myAmapFunT = new amapFile.AMapWX({
key: 你申请的key
})
},
最后生成请求进行驾车路线规划数据
/**
*@author ZY
*@date 2023/1/9
*@Description:生成规划路线
*@param {string} start 开始位置
*@param {string} end 结束位置
*@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
*
10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致
* 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长
2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况
*/
getPlanningRoute(start, end, strategy = 10) {
let that = this
uni.showLoading({
title: &#39;加载中&#39;
});
that.myAmapFunT.getDrivingRoute({
origin: start,
destination: end,
strategy: strategy, //备选方案
success: function(data) {
// console.log(&#39;所有路径&#39;,data)
if (data.paths && data.paths[0] && data.paths[0].steps) {
// 默认 10 会 对返回多条路径的方案 按照时间短的
let goodRouter = data.paths.sort((a, b) => {
return a.duration - b.duration
})[0]
that.distance = (goodRouter.distance * 0.001).toFixed(2) + &#39;公里&#39;
that.duration = &#39;大约&#39; + (goodRouter.duration / 60).toFixed(2) + &#39;分钟&#39;
let steps = goodRouter.steps
let points = []
for (var i = 0; i < steps.length; i++) {
var poLen = steps.polyline.split(&#39;;&#39;);
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(&#39;,&#39;)[0]),
latitude: parseFloat(poLen[j].split(&#39;,&#39;)[1])
})
}
}
that.polyline = [{
points: points,
color: strategy === 10 ? &#39;#0ee532&#39; : strategy === 2 ? &#39;#0742d9&#39; :
&#39;#ee6b06&#39;,
width: 8,
}]
}
uni.hideLoading();
},
fail: function(info) { //失败回调
console.log(&#39;路线规划失败&#39;)
console.log(info)
uni.hideLoading();
uni.showToast({
title: &#39;路线规划失败&#39;,
icon: &#39;error&#39;
});
},
})
},
2.完整源码组件
<template>
<view class=&#34;content&#34;>
<view class=&#34;back-button&#34; @click=&#34;toBack&#34;>
<image src=&#34;http://img.wisdomtaxi.com/toBack.png&#34; style=&#34;width: 100%; height: 100%;&#34;></image>
</view>
<map class=&#34;order-map&#34; :latitude=&#34;startPoint.latitude&#34; :longitude=&#34;startPoint.longitude&#34; show-location
:polyline=&#34;polyline&#34; @markertap=&#34;markertap&#34; :key=&#34;polyline.length + new Date().getTime()&#34;
:markers=&#34;markers&#34;>
<cover-view slot=&#34;callout&#34;>
<block v-for=&#34;(item,index) in markers&#34; :key=&#34;index&#34;>
<cover-view class=&#34;customCallout&#34; :marker-id=&#34;item.id&#34;>
<cover-view class=&#34;customCalloutContent&#34;>
{{item.title}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
<view class=&#34;order-box&#34;>
<view class=&#34;search-start&#34; v-if=&#34;endPoint.address&#34;>
<view class=&#34;custom-style&#34; v-for=&#34;item in btnList&#34; :key=&#34;item.value&#34;
:class=&#34;{active:flag === item.value}&#34; @click=&#34;selectRouteType(item.value)&#34;>
{{item.name}}
</view>
</view>
<view class=&#34;search-start&#34; v-if=&#34;distance || duration&#34;>
<u-icon name=&#34;file-text-fill&#34; color=&#34;#FFA500&#34; size=&#34;17&#34;></u-icon>
<view class=&#34;start-name&#34;>
距离：{{distance}} 时间：{{duration}}
</view>
</view>
<view class=&#34;search-start&#34;>
<u-icon name=&#34;map-fill&#34; color=&#34;#33a63b&#34; size=&#34;17&#34;></u-icon>
<view class=&#34;start-name&#34;>
您将在 <text style=&#34;color: #33a63b&#34;>{{startPoint.name | fmtEndAddr}}</text> 上车
</view>
</view>
<view class=&#34;search-start&#34; v-if=&#34;endPoint.name&#34;>
<u-icon name=&#34;map-fill&#34; color=&#34;#ee642b&#34; size=&#34;17&#34;></u-icon>
<view class=&#34;start-name&#34;>
{{endPoint.name|fmtEndAddr}}
</view>
</view>
<view class=&#34;search-box&#34; @click=&#34;openChooseLocation&#34;>
<u-icon name=&#34;search&#34; color=&#34;#ffa602&#34; size=&#34;23&#34;></u-icon>
<view class=&#34;search-placeholder&#34;>
请选择目的地
</view>
</view>
<view v-if=&#34;endPoint.name&#34; @click=&#34;submitToDriver&#34; class=&#34;send-btn&#34;>
发送给司机
</view>
</view>
</view>
</template>
<script>
import uniIcons from &#34;@/components/uni-icons/uni-icons.vue&#34;;
import amapFile from &#34;@/libs/amap-wx.js&#34;;
export default {
components: {
uniIcons
},
data() {
return {
markers: [],
tripInfo: {},
polyline: [],
startPoint: {
latitude: 26.56045894387685, //纬度
longitude: 106.68005128661751, //经度
name: &#39;&#39;,
address: &#39;&#39;
},
endPoint: {},
myAmapFunT: null,
distance: 0, //距离
duration: 0, //时间
flag: 10,
btnList: [{
name: &#39;推荐&#39;,
value: 10
},
{
name: &#39;躲避拥堵&#39;,
value: 4
},
{
name: &#39;距离短&#39;,
value: 2
},
]
}
},
filters: {
fmtEndAddr(val) {
if (val === null || val === &#39;&#39; || val === undefined) {
return &#39;未知地址&#39;;
}
return val;
},
},
onLoad() {
this.myAmapFunT = new amapFile.AMapWX({
key: 你申请的key
})
this.getCurrentLocation();
},
methods: {
//返回
toBack() {
uni.navigateBack({});
},
//获取当前定位
getCurrentLocation() {
let that = this
uni.getLocation({
type: &#39;gcj02&#39;,
success: function(res) {
// console.log(&#39;当前：&#39; , res);
// console.log(&#39;当前位置的经度：&#39; + res.longitude);
// console.log(&#39;当前位置的纬度：&#39; + res.latitude);
that.startPoint.longitude = res.longitude;
that.startPoint.latitude = res.latitude;
that.getAddress(that.startPoint.longitude + &#39;,&#39; + that.startPoint.latitude)
}
});
},
// 解析地址
getAddress(loc) {
var that = this;
var myAmapFun = this.myAmapFunT
if (loc !== null && loc !== &#39;&#39; && loc !== undefined) {
myAmapFun.getRegeo({
iconPath: &#39;http://img.wisdomtaxi.com/amap_icon.png&#39;,
width: &#39;37.5rpx&#39;,
height: &#39;37.5rpx&#39;,
location: loc,
success: function(data) { //成功回调
// console.log(&#39;地址解析&#39;,data)
that.startPoint.name = data[0].name
that.startPoint.address = data[0].desc
that.initMap()
},
fail: function(info) { //失败回调
console.log(info)
},
});
}
},
//初始化地图数据
initMap() {
this.markers.push({
id: 1,
latitude: this.startPoint.latitude, //纬度
longitude: this.startPoint.longitude, //经度
iconPath: &#39;/static/images/home/start.png&#39;, //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
title: this.startPoint.name, //标注点名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: &#34;ALWAYS&#34;,
},
}, )
},
/**
*@author ZY
*@date 2023/1/9
*@Description:选择位置
*@param {Object} opt https://uniapp.dcloud.net.cn/api/location/location.html
*
opt : {
latitude Number 否 目标地纬度
longitude Number 否 目标地经度
}
*/
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(&#39;位置名称：&#39; + res.name);
// console.log(&#39;详细地址：&#39; + res.address);
// console.log(&#39;纬度：&#39; + res.latitude);
// console.log(&#39;经度：&#39; + res.longitude);
if (!res.name) {
return uni.showToast({
title: &#39;请重新选择位置&#39;,
icon: &#39;none&#39;
});
}
//设置终点
that.endPoint = {
longitude: res.longitude,
latitude: res.latitude,
name: res.name,
address: res.address
}
//设置终点标记
that.markers[1] = {
id: 2,
latitude: res.latitude, //纬度
longitude: res.longitude, //经度
iconPath: &#39;/static/images/home/endd.png&#39;, //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
title: res.name, //标注点名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: &#34;ALWAYS&#34;
},
}
let start = that.startPoint.longitude + &#39;,&#39; + that.startPoint.latitude
let end = res.longitude + &#39;,&#39; + res.latitude
//每次选取位置完成后都会默认 10 策略
that.flag = 10
//生成规划路线
that.getPlanningRoute(start, end, 10)
},
fail: function(info) { //失败回调
console.log(&#39;调取失败&#39;)
console.log(info)
},
})
},
// 按钮选择策略
selectRouteType(idx) {
this.flag = idx
let start = this.startPoint.longitude + &#39;,&#39; + this.startPoint.latitude
let end = this.endPoint.longitude + &#39;,&#39; + this.endPoint.latitude
this.getPlanningRoute(start, end, idx)
},
/**
*@author ZY
*@date 2023/1/9
*@Description:生成规划路线
*@param {string} start 开始位置
*@param {string} end 结束位置
*@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
*
10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致
* 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长
2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况
*/
getPlanningRoute(start, end, strategy = 10) {
let that = this
uni.showLoading({
title: &#39;加载中&#39;
});
that.myAmapFunT.getDrivingRoute({
origin: start,
destination: end,
strategy: strategy, //备选方案
success: function(data) {
// console.log(&#39;所有路径&#39;,data)
if (data.paths && data.paths[0] && data.paths[0].steps) {
// 默认 10 会 对返回多条路径的方案 按照时间短的
let goodRouter = data.paths.sort((a, b) => {
return a.duration - b.duration
})[0]
that.distance = (goodRouter.distance * 0.001).toFixed(2) + &#39;公里&#39;
that.duration = &#39;大约&#39; + (goodRouter.duration / 60).toFixed(2) + &#39;分钟&#39;
let steps = goodRouter.steps
let points = []
for (var i = 0; i < steps.length; i++) {
var poLen = steps.polyline.split(&#39;;&#39;);
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(&#39;,&#39;)[0]),
latitude: parseFloat(poLen[j].split(&#39;,&#39;)[1])
})
}
}
that.polyline = [{
points: points,
color: strategy === 10 ? &#39;#0ee532&#39; : strategy === 2 ? &#39;#0742d9&#39; :
&#39;#ee6b06&#39;,
width: 8,
}]
}
uni.hideLoading();
},
fail: function(info) { //失败回调
console.log(&#39;路线规划失败&#39;)
console.log(info)
uni.hideLoading();
uni.showToast({
title: &#39;路线规划失败&#39;,
icon: &#39;error&#39;
});
},
})
},
// 点击标记点
markertap(e) {
let opt = this.markers.find(el => {
return el.id === e.detail.markerId
})
this.openChooseLocation(opt)
},
// 提交给司机
submitToDriver() {
let p = {}
p.idCard = uni.getStorageSync(&#39;driverInfo&#39;).idCard || &#39;&#39;
p.startLocation = this.startPoint.longitude + &#39;,&#39; + this.startPoint.latitude
p.startAddr = this.startPoint.name || &#39;未知&#39;
p.endLocation = this.endPoint.longitude + &#39;,&#39; + this.endPoint.latitude
p.endAddr = this.endPoint.name || &#39;未知&#39;
p.plan = this.flag || 10
p.locations = this.polyline[0].points || []
if (!p.idCard) {
return uni.showToast({
title: &#39;司机信息获取失败&#39;,
icon: &#39;none&#39;
});
}
uni.showLoading({
title: &#39;提交中&#39;
});
let that = this
this.request(&#39;api_sendDestination&#39;, p).then(res => {
uni.hideLoading();
uni.showToast({
title: &#39;发送成功&#39;
})
setTimeout(()=>{
that.toBack()
},1000)
}).catch(err => {
console.log(err)
uni.hideLoading();
uni.showToast({
title: &#39;发送失败&#39;,
icon: &#39;error&#39;
})
})
}
},
}
</script>
<style lang=&#34;scss&#34; 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;
/*文本不会换行*/
white-space: nowrap;
/*当文本溢出包含元素时，以省略号表示超出的文本*/
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> |
|
发表于 2023-1-14 10:02:34
