高德地图动态绘制路线--轨迹巡航（vue）

最新推荐文章于 2025-08-12 17:58:58 发布

原创

最新推荐文章于 2025-08-12 17:58:58 发布 · 9.2k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

1、将高德地图引入项目

第一步：在index.html文件中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

第二步：在webpack.base.conf.js的module.exports里添加

externals: {
   'AMap': 'AMap'
 }

第三步：在使用高德地图的组件里使用

<template>
  ...
    <div id="container" class='container'> </div>
  ...
</template>
<script>
import AMap from 'AMap'
export default {
...
}
</script>

2、动态绘制路线

第一部分：创建组件实例

var emptyLineStyle = {
          lineWidth: 0,
          fillStyle: null,
          strokeStyle: null,
          borderStyle: null
 };
var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        map: map, //所属的地图实例
        // clickToSelectPath: false,
        getPath: function(pathData, pathIndex) {
          //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
          return pathData.path;
        },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {
          //返回鼠标悬停时显示的信息
          if (pointIndex >= 0) {
              //鼠标悬停在某个轨迹节点上
              return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
          }
          //鼠标悬停在节点之间的连线上
          return pathData.name + '，点数量' + pathData.path.length;
        },
        //仅展示驶过线
        renderOptions: {
            pathLineStyle: emptyLineStyle,
            pathLineSelectedStyle: emptyLineStyle,
            pathLineHoverStyle: emptyLin