高德地图系列（四）：vue项目利用高德地图实现车辆的路线规划

目录

第一章 效果图

第二章 源代码 

第一章 效果图

• 小编该案例主要实现的两个点的思路：1、有两个正常的经纬度就可以在地图中绘制出汽车从起点到终点的路线规划；2、当用户经纬度发生变化时，用户可以通过某个操作，或者程序员通过某种方式，再次调用接口，从而实现线路的变化
•  小编转换成两个情景：1、首次进入地图渲染汽车的规划路径；2、通过点击事件表示经纬度发生变化，需要重新规划路线

第二章 源代码 

•  代码描述如下：（注意，以下代码只是小编的基本代码，细节优化暂时需要大家自己思考，并且小编在之后的文章中也会反应出来！！）

• 配置panel后会展示每个路段的信息，这里我们也可以根据它自定义样式。

• 这是我们绘制完成的路线信息，相当于后端传给前端的数据，当我们前端有了这些数据之后就能想怎么做怎么做了！！

• 待扩展：

1. 该案例还有许多不能的功能活用，暂时需要大家自行看官方文档了解每一个字段
2. 知识延伸：使用时需要考虑经纬度没有值时怎么处理
3. 知识延伸：实时获取用户经纬度，实时绘制路线

• 实例文档：

示例文档：位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 2.0 示例 | 高德地图API

• 接口文档如下：

接口文档：参考手册-地图 JS API 2.0 | 高德地图API