干货时间~关于使用高德地图实现路径规划的一些事情

需求分析

最近工作接到了与地图路径规划相关的需求:接口返回起始点位以及其中的途经点,前端展示对应驾车规划路径,路径规划分为最快捷模式与最短距离模式。

知识准备

高德地图是有向开发者提供路径规划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和安全密钥记得申请赋值一下哦~ 代码地址

相关推荐
江城开朗的豌豆9 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort9 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT10 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码10 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅10 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安10 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia10 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙10 小时前
JS设计模式指南
前端·javascript
Mintopia10 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人10 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架