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

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

技术栈: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的值

相关推荐
徐赛俊3 天前
QGIS + ArcGIS Pro 下载常见卫星影像及 ESRI Wayback 历史影像
arcgis
大大大大大大大大大泡泡糖3 天前
使用arcgis提取评价指标时,导出数据是负数-9999
arcgis
杨超越luckly3 天前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
fenghx2584 天前
vscode使用arcpy-选择arcgis带的python+运行错误解决
vscode·python·arcgis
非科班Java出身GISer4 天前
ArcGIS JSAPI 高级教程 - 高亮效果优化之开启使用多高亮样式
arcgis·arcgis js高亮效果·arcgis js 高亮优化·arcgis js高亮效果优化·arcgis js 多高亮效果
ikgade4 天前
ArcGIS Manager Server Add Host页面报错 HTTP Status 500
网络协议·http·arcgis
细节控菜鸡10 天前
【2025最新】ArcGIS 点聚合功能实现全教程(进阶版)
arcgis
细节控菜鸡10 天前
【2025最新】ArcGIS for JS点聚合功能实现
开发语言·javascript·arcgis
你是一个铁憨憨18 天前
ArcGIS定向影像(1)——非传统影像轻量级解决方案
arcgis·gis·影像·定向影像
QQ35967734518 天前
ArcGIS Pro实现基于 Excel 表格批量创建标准地理数据库(GDB)——高效数据库建库解决方案
数据库·arcgis·excel