uniapp小程序使用高德地图api实现路线规划
路线规划简介
路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。
高德开放平台
本例是驾车路线规划功能和位置选择地图api:chooseLocation
示例：
1、在页面的 js 文件中，实例化 AMapWX 对象，请求进行驾车路线规划。
首先，引入 amap-wx.js 文件（amap-wx.js从相关下载页面下载的 zip 文件解压后得到）。
import amapFile from "@/libs/amap-wx.js";然后在 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: '加载中'
});
that.myAmapFunT.getDrivingRoute({
origin: start,
destination: end,
strategy: strategy, //备选方案
success: function(data) {
// console.log('所有路径',data)
if (data.paths && data.paths && data.paths.steps) {
// 默认 10 会 对返回多条路径的方案按照时间短的
let goodRouter = data.paths.sort((a, b) => {
return a.duration - b.duration
})
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.polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen.split(',')),
latitude: parseFloat(poLen.split(','))
})
}
}
that.polyline = [{
points: points,
color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' :
'#ee6b06',
width: 8,
}]
}
uni.hideLoading();
},
fail: function(info) { //失败回调
console.log('路线规划失败')
console.log(info)
uni.hideLoading();
uni.showToast({
title: '路线规划失败',
icon: 'error'
});
},
})
},2.完整源码组件
<template>
<view >
<view@click="toBack">
<image src="http://img.wisdomtaxi.com/toBack.png" ></image>
</view>
<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:marker-id="item.id">
<cover-view >
{{item.title}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
<view >
<viewv-if="endPoint.address">
<viewv-for="item in btnList" :key="item.value"
: @click="selectRouteType(item.value)">
{{item.name}}
</view>
</view>
<viewv-if="distance || duration">
<u-icon name="file-text-fill" color="#FFA500" size="17"></u-icon>
<view >
距离：{{distance}} 时间：{{duration}}
</view>
</view>
<view >
<u-icon name="map-fill" color="#33a63b" size="17"></u-icon>
<view >
您将在 <text >{{startPoint.name | fmtEndAddr}}</text> 上车
</view>
</view>
<viewv-if="endPoint.name">
<u-icon name="map-fill" color="#ee642b" size="17"></u-icon>
<view >
{{endPoint.name|fmtEndAddr}}
</view>
</view>
<view@click="openChooseLocation">
<u-icon name="search" color="#ffa602" size="23"></u-icon>
<view >
请选择目的地
</view>
</view>
<view v-if="endPoint.name" @click="submitToDriver" >
发送给司机
</view>
</view>
</view>
</template>
来源:https://www.cnblogs.com/zy-mg/p/17039609.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]