需求分析
最近工作接到了与地图路径规划相关的需求:接口返回起始点位以及其中的途经点,前端展示对应驾车规划路径,路径规划分为最快捷模式与最短距离模式。
知识准备
高德地图是有向开发者提供路径规划api的,感兴趣的小伙伴可以先看下官方提供的api说明高德地图路径规划
案例展示
核心代码
js
let driving
AMap.plugin('AMap.Driving', function () {
//在回调函数中实例化插件,并使用插件功能
driving = new AMap.Driving({
policy: AMap.DrivingPolicy.LEAST_TIME, // 驾车路线规划策略
map: 'map容器',
panel: '',
})
driving.search(
new AMap.LngLat('lng','lat'), // 起点
new AMap.LngLat('lng','lat'), // 终点
{
waypoints:[new AMap.LngLat('lng','lat')] // 途经点
},
function (status, result) {
if (status === 'complete') {
console.log('绘制驾车路线完成')
} else {
console.error('获取驾车数据失败:' + result)
}
}
)
})
这里我用到了最快捷模式与最短距离模式,对应设置 policy 属性的属性值即可,途经点通过数组的方式传递对应经纬度即可
功能优化
因为切换方式时路径是不会消失的,所以我们要根据 driving 是否存在来调用其 clear 方法清空上次保留的路径
js
if(driving) {
driving.clear()
}
补充
最后附上demo的源代码,有需要的小伙伴可以参考下,注意高德的key和安全密钥记得申请赋值一下哦~ 代码地址