高德地图轨迹回放（以及点位信息数据处理和展示）

实际业务中常常会有轨迹回放的场景实现，以下是实现轨迹回放以及点位信息展示处理等场景，先上图看是否满足你的需求（满足的话麻烦点赞收藏！轨迹数据随机模拟的 可根据实际场景接口来查）

一，初始化地图 

       记得先申请你的高德地图的key（申请对应平台的key）

 //初始化地图
    initAmap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397155, 39.916345],
        zoom: 12,
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"]);
      //添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      this.map.addControl(new AMap.ToolBar());

      //添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      this.map.addControl(new AMap.Scale());
      this.manyPersonWays();
    },

二，数据模拟（这里可以根据实际场景来获取数据）

我这里的是一秒随机生成一个点位经纬度然后去更新 也是写在 manyPersonWays里面

  const _this = this;
      // 北京主城区的经纬度范围
      const minLatitude = 39.442; // 最小纬度
      const maxLatitude = 39.864; // 最大纬度
      const minLongitude = 116.172; // 最小经度
      const maxLongitude = 116.553; // 最大经度
      // 定义生成标记点
      const numMarkers = [
        {
          id: 1,
          url: "../static/avatar_girl.png", // 图标的URL地址
        },
      ];
      // 定义更新标记点位置的时间间隔（毫秒）
      const updateInterval = 1000;
      // 生成标记点
      const markers = [];
      for (let i = 0; i < numMarkers.length; i++) {
        // 随机生成初始经纬度
        const latitude =
          Math.random() * (maxLatitude - minLatitude) + minLatitude;
        const longitude =
          Math.random() * (maxLongitude - minLongitude) + minLongitude;
        const marker = new AMap.Marker({
          id: numMarkers[i].id,
          position: [latitude, longitude],
          offset: new AMap.Pixel(-10, -30),
          map: _this.map,
        });

        // 将标记点添加到数组中
        markers.push(marker);
      }

三，创建每一个路过的经纬度的marker 再添加点击事件进行信息处理

          绘制行驶路径，点击事件获取到之后可以进行自定义的处理（可以写弹窗点击事件可获取当前点位数据信息 进行展示等操作）

  // 定时器更新标记点位置
      const updateMarkerPositions = setInterval(() => {
        // 模拟更新标记点位置 轨迹回放可以使用此方法
        // 创建标记点对象
        function createMarker(longitude, latitude) {
          const marker = new AMap.Marker({
            position: [longitude, latitude],
            // icon: numMarkers[i].url,
            offset: new AMap.Pixel(-10, -30),
            map: _this.map,
            // iconSize: new AMap.Size(30, 30),
          });
          return marker;
        }
        // 绘制行驶路径
        function drawPath(path) {
          _this.path.push(path);
          // 将路径添加到对应标记点的路径数组中
          // 创建 Polyline 对象
          var index = 5;
          // 遍历标记点数组，更新每个标记点的位置
          // 创建 Polyline 对象
          var routeLine = new AMap.Polyline({
            path: _this.path, // 将所有路径数组拼接为一个路径数组
            showDir: true,
            isOutline: true,
            outlineColor: "#ffeeee",
            borderWeight: 2,
            strokeColor: "#fd3e4a", // 使用不同的深色区分不同的轨迹
            strokeWeight: 6,
            lineJoin: "round",
            lineCap: "round",
          });
          index++;
          // 将 Polyline 对象添加到地图上
          _this.map.add(routeLine);
        }
        // 添加标记点，并开始绘制行驶路径
        function addMarkerAndDrawPath(position) {
          console.log(position, "position");
          drawPath([position.lng, position.lat]);
          // 创建新的标记点
          const marker = createMarker(position.lng, position.lat);
          // 添加地图点击事件监听器
          _this.map.on("click", function (e) {
            console.log("Map clicked!");
          });

          // 添加标记点点击事件监听器
          marker.on("click", function (e) {
            _this.modalName = "bottomModal";
            console.log("Marker clicked!", e);
          });
          _this.map.add(marker);
          // 将标记点位置添加到路径中
        }
        // 存储每个标记点的路径
        markers.forEach((marker) => {
          // 随机生成新的经纬度
          const newLatitude =
            Math.random() * (maxLatitude - minLatitude) + minLatitude;
          const newLongitude =
            Math.random() * (maxLongitude - minLongitude) + minLongitude;
          // 更新标记点位置
          marker.setPosition([newLongitude, newLatitude]);
          // 获取标记点的经纬度
          const position = marker.getPosition();
          // 绘制该标记点的路径
          // drawPath(position);
          addMarkerAndDrawPath(position);
        });
      }, updateInterval);

      // 模拟一段时间后停止更新（这里使用伪代码代替）
      setTimeout(() => {
        clearInterval(updateMarkerPositions);
        console.log("更新已停止");
        // 示例：更新已停止，移除对应标记点和路径
        // _this.map.remove(
        //   _this.map.getAllOverlays("marker")[
        //     _this.map.getAllOverlays("marker").length - 1
        //   ]
        // );
      }, 10000); // 模拟更新持续5秒钟