如何使用高德地图 API 做一个路线规划应用,展示自定义路线

喜欢骑车转,知道一些比较好的路线,想要分享给别人的时候不知道该怎么分享,有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。

其实 web API 可以实现很具体的路线规则,使用 ​​Amap.DragRoute​​ 类

看例子:

路线推荐: 金刚纂路 ​​https://kylebing.cn/tools/map/#/route/1​

如何使用高德地图 API 做一个路线规划应用,展示自定义路线_自定义

官方 DragRoute 的说明

关于路线规则的说明,官方如下,我们主要使用其中的 途经点 功能

​https://lbs.amap.com/api/jsapi-v2/guide/services/navigation​

1、途经点坐标

首先需要有途经点的坐标数组,这里可以使用我做的这个工具来获取,官方的那个很不方便。

​https://kylebing.cn/tools/map/#/tool/route​

如何使用高德地图 API 做一个路线规划应用,展示自定义路线_地图_02

2、需要在代码中引入 DragRoute 插件

所有的功能都是以插件的形式引入的,像比例尺、缩放按钮什么的。看官方文档,有绍介说如何引入插件

3、生成路径

let route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE, {})
// map 生成的地图对象
// path 就是路径点数组
// AMap.DrivingPolicy 就是路经生成的规则,驾车规则。就近还是就最省钱,还是步行少什么的

驾车规则具体:​​https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy​

官方的说明如下:

如何使用高德地图 API 做一个路线规划应用,展示自定义路线_地图_03

4、获取路径的信息

这个在官方没有说明,就是路线规则好之后,关于路线的一些信息,如驾车时间,路线距离等。
这个需要监听上面生成的途经点路线的事件

route.on('complete', res => {
// 路线规划完成后,返回的路线数据:设置距离、行驶时间
let lineData = res.data.routes[0] // 路线数据
let distance = (lineData.distance / 1000).toFixed(1) // m -> km 距离
let time = (lineData.time / 60).toFixed() // second -> min 用时
})

所有的例子都在我那个页面中

地图工具 ​​https://kylebing.cn/tools/map​