如何使用高德地图 API 做一个路线规划应用,展示自定义路线
喜欢骑车转,知道一些比较好的路线,想要分享给别人的时候不知道该怎么分享,有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。
其实 web API 可以实现很具体的路线规则,使用 Amap.DragRoute
类
看例子:
路线推荐: 彩西路
http://kylebing.cn/tools/map/#/route/route-line?lineId=8
前提:
新版 Web API JS 需要你设置一下密钥才能正常使用路径功能,参见官方文档:
官方 DragRoute 的说明
关于路线规则的说明,官方如下,我们主要使用其中的 途经点 功能
粗略的代码是这样的:
export default {
data(){
return {
activeLineObj: {
index: 1,
name: '金刚纂路',
area: '南部山区',
note: '金刚纂路是一条比较曲折的山路,平坦,注意拐弯不可见的地方鸣笛示意',
roadType: '柏油路',
months: '春,夏,秋',
videoLink: 'https://www.bilibili.com/video/BV1dB4y1M7fc/',
paths: [
{position: [117.111285, 36.658996], name: '奥体西', note: ''},
{position: [117.119066, 36.647191], name: '龙洞立交桥', note: ''},
{position: [117.136836, 36.646152], name: '龙洞隧道', note: ''},
{position: [117.166971, 36.647804], name: '旅游路', note: ''},
{position: [117.177737, 36.639391], name: '港九路', note: ''},
{position: [117.178289, 36.623558], name: '滩九线', note: ''},
{position: [117.179607, 36.576843], name: '金刚纂路开始', note: ''},
{position: [117.1682, 36.547592], name: '南山牧场', note: '这段路最高的地方,峰顶'},
{position: [117.164123, 36.529662], name: '潘洪路起点', note: '另一条不错路线的开始'},
{position: [117.166935, 36.515995], name: '村庄', note: '路边很多卖水果的,|很多采摘的地方,|5-6 月份有樱桃,|之后有杏什么的'},
{position: [117.152763, 36.505393], name: '金刚纂路结束', note: '小桥'},
]
},
}
},
mounted() {
this.loadLine(this.map, this.activeLineObj)
},
methods: {
// 载入路线信息
loadLine(map, line) {
// path 是驾车导航的起、途径和终点,官方建议最多旋转 16 个途经点,以保证良好使用体验
// 取出路径中的所有点
let path = line.paths.map (item => item.position)
let route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE, {
// 定义始点、结点、途经点的图标
startMarkerOptions: {
offset: new AMap.Pixel(-13, -40),
icon: new AMap.Icon({ // 设置途经点的图标
size: new AMap.Size(26, 40),
image: ICON.start,
// imageOffset: new AMap.Pixel(0,0), // 图片的偏移量,在大图中取小图的时候有用
imageSize: new AMap.Size(26, 40) // 指定图标的大小,可以压缩图片
}),
},
endMarkerOptions: {
offset: new AMap.Pixel(-13, -40),
icon: new AMap.Icon({ // 设置途经点的图标
size: new AMap.Size(26, 40),
image: ICON.end,
// imageOffset: new AMap.Pixel(0,0), // 图片的偏移量,在大图中取小图的时候有用
imageSize: new AMap.Size(26, 40) // 指定图标的大小,可以压缩图片
}),
},
midMarkerOptions: {
offset: new AMap.Pixel(-5, -10),
icon: new AMap.Icon({ // 设置途经点的图标
size: new AMap.Size(15, 15),
image: ICON.midIcon,
// imageOffset: new AMap.Pixel(0,0), // 图片的偏移量,在大图中取小图的时候有用
imageSize: new AMap.Size(15, 15) // 指定图标的大小,可以压缩图片
}),
},
})
// 路线规划完成后,返回的路线数据:设置距离、行驶时间
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
this.$set(this.activeLineObj, 'distance', distance)
this.$set(this.activeLineObj, 'time', time)
})
// 查询导航路径并开启拖拽导航
route.search()
},
}
}
1、途经点坐标
首先需要有途经点的坐标数组,这里可以使用我做的这个工具来获取,官方的那个很不方便。
最终获取到这样的数据:
[
{position: [117.111285, 36.658996], name: '奥体西', note: ''},
{position: [117.119066, 36.647191], name: '龙洞立交桥', note: ''},
{position: [117.136836, 36.646152], name: '龙洞隧道', note: ''},
{position: [117.166971, 36.647804], name: '旅游路', note: ''},
{position: [117.177737, 36.639391], name: '港九路', note: ''},
{position: [117.178289, 36.623558], name: '滩九线', note: ''},
{position: [117.179607, 36.576843], name: '金刚纂路开始', note: ''},
{position: [117.1682, 36.547592], name: '南山牧场', note: '这段路最高的地方,峰顶'},
{position: [117.164123, 36.529662], name: '潘洪路起点', note: '另一条不错路线的开始'},
{position: [117.166935, 36.515995], name: '村庄', note: '路边很多卖水果的,|很多采摘的地方,|5-6 月份有樱桃,|之后有杏什么的'},
{position: [117.152763, 36.505393], name: '金刚纂路结束', note: '小桥'},
]
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
官方的说明如下:
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 用时
})
5、生成各途经点的说明
根据上面 paths 中的各途经点的信息,生成地图的 Marker 标识,就成了截图中的路径的样子。
6、另外还支持的路径规划有
https://lbs.amap.com/api/javascript-api/reference/route-search
完
所有的例子都在我那个页面中
我已经将 Loca 和 路线规划、范围标记的几个页面放在了这个开源项目中,使用的时候填入自己申请的高德开发 app id: