Xiaobin's Blog
·
Vue 2.x 使用高德地图JS API 2.0加载起点终点路径轨迹
💡
原文中文，约7600字，阅读约需18分钟。
📝
内容提要
本文介绍了如何在Vue 2.x中使用高德地图JS API 2.0加载起点和终点的路径轨迹。通过引入高德地图JS，创建地图组件，展示行驶轨迹和自定义标记点。提供了初始化地图、绘制路线及坐标转换的代码示例，并支持导航至车辆当前位置的功能。
🎯
关键要点
- 在 HTML 文件中引入高德地图 JS API 以加载地图。
- 创建 Vue 组件以展示行驶轨迹和自定义标记点。
- 使用 AMap.convertFrom 方法将 GPS 坐标转换为高德坐标。
- 绘制起点和终点的标记，并显示行驶轨迹。
- 提供导航至车辆当前位置的功能，支持多种地图应用程序。
❓
延伸问答
如何在Vue 2.x中引入高德地图JS API？
在HTML文件中使用<script>标签引入高德地图JS API，格式为：<script src='https://webapi.amap.com/maps?v=2.0&key=申请的key值&plugin=AMap.Driving'></script>
如何在Vue组件中展示行驶轨迹和标记点？
创建一个Vue组件，使用<template>标签定义地图和标记点，利用data属性传递起点和终点的坐标。
如何将GPS坐标转换为高德坐标？
使用AMap.convertFrom方法将GPS坐标转换为高德坐标，确保在绘制轨迹之前进行转换。
如何绘制起点和终点的标记？
在地图上使用AMap.Marker创建起点和终点的标记，设置其位置和图标，然后添加到地图中。
如何实现导航至车辆当前位置的功能？
在Vue组件中创建一个按钮，点击后根据选择的地图应用生成相应的导航URL，并使用window.open打开。
使用高德地图JS API时可能遇到哪些坐标偏移问题？
可能会遇到标记点位置显示不准确的问题，需要将其他坐标转换为高德坐标以修正偏移。
➡️
