vue.js 高德地图多辆小车移动

要实现多辆小车在高德地图上移动，可以使用 Vue.js 结合高德地图 JavaScript API，为每辆小车创建一个独立的标记，并对每个标记进行移动操作。

以下是一个示例代码：

<template>
  <div>
    <div id="map" style="width: 800px; height: 600px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      markers: [
        { id: 1, lnglat: [116.39, 39.9] },
        { id: 2, lnglat: [116.4, 39.91] },
        { id: 3, lnglat: [116.41, 39.92] },
        // ...
      ]
    };
  },
  mounted() {
    // 创建地图
    this.map = new AMap.Map('map', {
      zoom: 15,
      center: [116.39, 39.9]
    });

    // 创建小车标记
    this.markers.forEach(markerData => {
      const marker = new AMap.Marker({
        map: this.map,
        position: markerData.lnglat,
        icon: new AMap.Icon({
          size: new AMap.Size(50, 50),
          image: 'https://webapi.amap.com/images/car.png',
          imageSize: new AMap.Size(50, 50)
        })
      });

      // 设置小车标记的角度
      function setMarkerAngle(angle) {
        marker.setAngle(angle);
      }

      // 设置小车标记的位置
      function setMarkerPosition(position) {
        marker.setPosition(position);
      }

      // 获取小车标记的角度
      function getAngle(position) {
        // 根据当前位置和下一个位置计算角度
        // ...
      }

      // 小车移动的动画
      function move() {
        let index = 0;
        setInterval(() => {
          const currentPosition = markerData.lnglat;
          const nextPosition = this.markers[index].lnglat;

          const angle = getAngle(currentPosition, nextPosition);
          setMarkerAngle(angle);
          setMarkerPosition(nextPosition);

          index++;
          if (index >= this.markers.length) {
            index = 0;
          }
        }, 1000);
      }

      // 开始小车移动
      move();
    });
  }
}
</script>

在上述代码中，通过遍历 `markers` 数组为每辆小车创建一个独立的标记，并在 `mounted` 钩子函数中循环地对每个标记进行移动操作。你可以根据实际需求修改标记的初始位置、路径、移动速度等参数。记得在 `mounted` 钩子函数中调用相关方法来初始化地图和小车移动。