700字范文 > 如何使用高德地图 API 做一个路线规划应用展示自定义路线

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

时间：2018-09-15 10:33:10

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

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

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

看例子：

路线推荐：金刚纂路 /tools/map/#/route/1

官方 DragRoute 的说明

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

/api/jsapi-v2/guide/services/navigation

粗略的代码是这样的：

export default {data(){return {activeLineObj: {index: 1,name: '金刚纂路',area: '南部山区',note: '金刚纂路是一条比较曲折的山路，平坦，注意拐弯不可见的地方鸣笛示意',roadType: '柏油路',months: '春，夏，秋',videoLink: '/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 -> kmlet time = (lineData.time / 60).toFixed() // second -> minthis.$set(this.activeLineObj, 'distance', distance)this.$set(this.activeLineObj, 'time', time)})// 查询导航路径并开启拖拽导航route.search()},}}

1、途经点坐标

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

/tools/map/#/tool/route

最终获取到这样的数据：

[{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 就是路经生成的规则，驾车规则。就近还是就最省钱，还是步行少什么的

驾车规则具体：/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 用时})