一次使用高德地图动画轨迹的踩坑记录

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

公司要求要展示车辆行驶轨迹，并且有重新播放行驶轨迹的功能。我们的项目是vue3，之前没引入地图。我按照高德的文档操作，很顺利没问题。问题出现在重新播放功能上

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、高德地图轨迹动画步骤

调用AMap.MoveAnimation插件

AMap.plugin("AMap.MoveAnimation", function () {
	marker.value = new AMap.value.Marker({
	   map: map.value,
	   position: [116.478935, 39.997761], // 动画起始点
	   // icon: "/ship.svg",
	   offset: new AMap.value.Pixel(-89, -80),
	   autoRotation: true,
	   angle: 0,
	   icon: new AMap.value.Icon({
	     image: "/car.svg",
	     size: new AMap.value.Size(150, 150), // 图标所处区域大小
	     imageSize: new AMap.value.Size(150, 150) // 图标大小
	   }),
	 });
	 // 画线，小车即将行驶的线
	 new AMap.value.Polyline({
	   map: map.value,
	   path: lineArr,// 数据
	   showDir: true,
	   strokeColor: "#28F", //线颜色
	   // strokeOpacity: 1,     //线透明度
	   strokeWeight: 6, //线宽
	   // strokeStyle: "solid"  //线样式
	 });
	 // 车辆即将行驶的动画线，车辆行驶过后会把轨迹线覆盖掉，因此这根线还没开始画，需要调用moving方法同时给这根线赋值经纬度坐标
	 passedPolyline.value = new AMap.value.Polyline({
	   map: map.value,
	   strokeColor: "#AF5", //线颜色
	   strokeWeight: 6, //线宽
	 });
	 // 从轨迹起始点的位置调用moving方法
	 marker.value.on("moving", function (e) {
	 	// 赋值经纬度
	   passedPolyline.value.setPath(e.passedPath);
	   // map.value.setCenter(e.target.getPosition(), true);
	 });
	 map.value.setFitView();
	 marker.value.moveAlong(lineArr, {
	   duration: 1500, // 行驶每个点的间隔时间
	 });
   })

2.重新播放

我猜想高德地图一定会有重新加载整个地图的方法，但是我没找到，并且一筹莫展。
后来想到这个轨迹回放的示例是写在点（marker）的示例文档里的。

并且上面编码的过程中首先调用动画差价后立马绘制起始点，那么我打印这个其实点看看能找到什么

那么我们调用这个remove清除数据重新绘制。

---