地图轨迹回放vue代码

地图轨迹回放是一种常见的功能，它可以在地图上展示一段时间内的轨迹数据。在Vue中实现地图轨迹回放，我们可以借助第三方地图库（如百度地图、高德地图）和轨迹数据，通过编写代码来实现。

我们需要在Vue项目中引入地图库，并创建地图容器。以百度地图为例，我们可以在Vue组件的`mounted`钩子函数中创建地图容器，并初始化地图：

mounted() {
  // 引入百度地图API
  const script = document.createElement('script');
  script.src = 'https://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY';
  script.onload = () => {
    // 创建地图容器
    const map = new BMap.Map('map-container');
    // 初始化地图
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(true);
  };
  document.head.appendChild(script);
}

接下来，我们需要获取轨迹数据，并在地图上展示。假设我们的轨迹数据是一个包含经纬度信息的数组`trackData`，其中每个元素代表一个时间点的位置。我们可以通过遍历轨迹数据，在地图上添加标记点，并通过定时器实现轨迹回放的效果。

// 假设轨迹数据为一个包含经纬度信息的数组
const trackData = [
  { lng: 116.404, lat: 39.915 },
  { lng: 116.414, lat: 39.915 },
  { lng: 116.424, lat: 39.915 },
  // ...
];
// 在Vue组件中定义地图和标记点
data() {
  return {
    map: null, // 地图对象
    marker: null, // 标记点对象
    currentIndex: 0, // 当前轨迹数据索引
  };
},
mounted() {
  // 创建地图容器
  const map = new BMap.Map('map-container');
  // 初始化地图
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  map.enableScrollWheelZoom(true);
  this.map = map;
  // 添加标记点
  const point = new BMap.Point(trackData[0].lng, trackData[0].lat);
  const marker = new BMap.Marker(point);
  map.addOverlay(marker);
  this.marker = marker;
  // 开始轨迹回放
  this.playTrack();
},
methods: {
  playTrack() {
    setInterval(() => {
      // 获取下一个轨迹数据
      this.currentIndex++;
      if (this.currentIndex >= trackData.length) {
        this.currentIndex = 0;
      }
      const point = new BMap.Point(trackData[this.currentIndex].lng, trackData[this.currentIndex].lat);
      // 移动标记点
      this.marker.setPosition(point);
      this.map.panTo(point);
    }, 1000);
  },
},

在上述代码中，我们通过`setInterval`函数每隔一定时间切换轨迹数据，然后获取对应的经纬度信息，并将标记点移动到相应的位置。通过调用`panTo`方法实现地图的平滑移动。

需要注意的是，上述代码中的`YOUR_API_KEY`需要替换为你自己的百度地图API密钥。还可以根据实际需求对地图样式、标记点样式等进行进一步的定制。

实现地图轨迹回放的关键是获取轨迹数据，并通过定时器来切换位置信息并实现地图的平滑移动。借助第三方地图库，我们可以很方便地在Vue项目中实现这一功能。