vue3集成高德地图绘制轨迹地图

~ rainbow～2025-06-14 0:10

背景：展示地图的物流轨迹信息

技术栈：vue3+高德地图

功能点：

1、支持平移、拖拽

2、支持缩小、放大

3、默认把轨迹置于画布中央

4、轨迹上有流光动画效果

前置工作

1、先安装包

复制代码

npm i @amap/amap-jsapi-loader --save

2、引入

复制代码

import AMapLoader from '@/amap/amap-jsapi-loader';

3、访问高德地图官网，注册高德地图账号：https://lbs.amap.com/

注册成功之后，点控制台

选择应用管理，然后创建新应用

创建成功之后，会在我的应用中看到对应的key

vue3中创建demo:JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

物流轨迹地图：实现过程中遇到的问题

1、路径置于画布中央

2、隐藏高德地图版权信息

复制代码

.amap-logo,
.amap-copyright {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

3、标记起点/终点，起终点标识符设置动画效果

复制代码

 map.add(polyline);
    // 起点
    startMarker = new win.AMap.Marker({
      position: pathArray[0],
      content: markerHtml('#4CAF50', '起'),
      offset: new win.AMap.Pixel(-15, -15),
      zIndex: 100
    });
    map.add(startMarker);
    // 终点
    endMarker = new win.AMap.Marker({
      position: pathArray[pathArray.length - 1],
      content: markerHtml('#F44336', '终'),
      offset: new win.AMap.Pixel(-15, -15),
      zIndex: 100
    });
    map.add(endMarker);

const markerHtml = (color: string, text: string) => `
  <div style="width:32px;height:32px;position:relative;display:flex;align-items:center;justify-content:center;">
    <div class="ripple" style="position:absolute;width:32px;height:32px;left:0;top:0;border-radius:50%;background:${color};opacity:0.3;animation:ripple 1.5s infinite;"></div>
    <div style="width:20px;height:20px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;z-index:1;">
      <span style="color:#fff;font-size:12px;font-weight:bold;">${text}</span>
    </div>
  </div>
`;

.ripple {
  animation: ripple 1.5s infinite;
}
@keyframes ripple {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.0);
    opacity: 0.1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

4、添加轨迹信息

5、添加流光

注意：调试的时候，可以看到流光属性已经加载了，但是页面上无法看到流光效果,原因：

1、插件上一定药引入Loca，并且是2.0版本

2、注意设置zIndex的值