当前位置：首页 > news >正文

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

news 来源：原创 2025/6/13 8:32:17

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

技术栈：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、添加轨迹信息