如何使用高德地图 API 做一个路线规划应用,展示自定义路线
如何使用高德地图 API 做一个路线规划应用,展示自定义路线
喜欢骑车转,知道一些比较好的路线,想要分享给别人的时候不知道该怎么分享,有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。
其实 web API 可以实现很具体的路线规则,使用 Amap.DragRoute
类
看例子:
路线推荐: 金刚纂路 http://kylebing.cn/tools/map/#/route/1
官方 DragRoute 的说明
关于路线规则的说明,官方如下,我们主要使用其中的 途经点 功能
https://lbs.amap.com/api/jsapi-v2/guide/services/navigation
粗略的代码是这样的:
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 -> kmlet time = (lineData.time / 60).toFixed() // second -> minthis.$set(this.activeLineObj, 'distance', distance)this.$set(this.activeLineObj, 'time', time)})// 查询导航路径并开启拖拽导航route.search()},}
}
1、途经点坐标
首先需要有途经点的坐标数组,这里可以使用我做的这个工具来获取,官方的那个很不方便。
http://kylebing.cn/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 就是路经生成的规则,驾车规则。就近还是就最省钱,还是步行少什么的
驾车规则具体: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
完
所有的例子都在我那个页面中
地图工具 http://kylebing.cn/tools/map
我已经将 Loca 和 路线规划、范围标记的几个页面放在了这个开源项目中,使用的时候填入自己申请的高德开发 app id:
https://github.com/KyleBing/demo-map-loca
如何使用高德地图 API 做一个路线规划应用,展示自定义路线相关推荐
- 【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
文章目录 0. 前言 1. 功能设计 2. 数据处理 3. 项目结构 4. 功能实现 4.1. 初始化 4.2. 地图基础功能模块 4.2.1. 放大缩小功能, 图层管理功能 4.2.2. 地图测量功 ...
- js添加多marker 高德地图_web开发如何使用高德地图API(四)通过AMap.Marker自定义标点...
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 准备工作: 首先,注册开发者账号,成为高德开放平台开发者 ...
- js 高德地图api模拟一个静态|地图图片
https://lbs.amap.com/api/webservice/guide/api/staticmaps/ 之后去研究下这个 静态地图 原: <!-- 地图区域 --> <d ...
- 高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的.如何清除上一次的路径规划呢?开发手册上有一个 cle ...
- vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...
- 高德地图API实现区域立体效果
高德地图API实现区域立体效果 初衷 区域掩膜 垂面Wall 区域掩膜与垂面Wall相结合,构建区域立体效果 最后 初衷 在利用高德地图API做项目的过程中遇到需只显示一个区域的地图,并且具有立体效果 ...
- python路径规划仿真实验_【python实战】批量获得路径规划——高德地图API
1.需求 在上篇中,已经批量获得了经纬度信息,现在需要根据经纬度来进行路径规划,想知道两点之间的距离和路程.花费等信息. 这时候就需要用到高德地图API中的路径规划功能了. 2.过程 1. 构造经纬度 ...
- 高德地图 API 显示跑步路线
模仿对象 此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画 ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 高德地图API路线规划
高德地图API基础使用 高德地图API体验 申请Key 初体验 添加插件 点击事件返回地址值 两点之间获取驾车导航路线 高德地图API体验 申请Key 申请高德地图账号 登录后,应用管理下创建自己的应 ...
最新文章
- apache2.2.21 + php5.3.8 + mysql5.5配置
- git-flow 流程 备忘清单
- 【管理】高级经理与普通经理区别到底在哪?
- C语言:L1-034 点赞 (20分)(解题报告)
- 从Oracle到PostgreSQL:动态性能视图 vs 标准统计视图
- [翻译]AKKA笔记 - DEATHWATCH -7
- 【高数】幂级数求和函数问题:用变限积分?积分下限是0?S(0)怎么求?求和时起始项n和角标有规定吗?
- 百度文库如何转换成word文档
- QQ群排名技术讲解、实战分析、核心要点 盗引结合篇
- mysql sql 分析工具下载_DB Query Analyzer下载
- 如何在数学建模比赛中稳拿奖——个人100%获奖经验分享
- python视频操作:下载、选取特定帧、批量导入ppt及硬字幕提取
- 动画:用动画给面试官解释 TCP 三次握手过程
- destoon php文件,destoon代码从头到尾捋一遍
- 做网站要服务器和什么软件,做网站的软件有哪些,自己建网站要用到哪些软件?...
- 武夫提笔——席卷世界Nodejs之初步对比:与opa各占几分春色?
- ComputerVision会议+领先研究室+专家+代码网址(转载)
- 解决Error creating bean with name ‘redisConnectionFactory‘ defined in class path resource...问题
- Oracle任意字符串转换成拼音首字母简写
- SAP ABAP PP常用数据库表