Vue使用百度地图以及实现轨迹回放 附完整代码

<template>
  <div id="map" style="width:100%;height:800px;"></div>
</template>
 
<script>
export default {
  name: 'BaiduMap',
  data() {
    return {
      map: null,
      trackPoints: [], // 轨迹点数组
      marker: null, // 标记点
      polyline: null, // 轨迹线
    };
  },
  mounted() {
    this.initMap();
    this.initTrack();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    },
    initTrack() {
      // 模拟加载轨迹点数据
      this.trackPoints = [
        {lng: 116.404, lat: 39.915},
        // ...更多点
      ];
      this.moveTrack();
    },
    moveTrack() {
      if (this.trackPoints.length > 0) {
        let point = new BMap.Point(this.trackPoints[0].lng, this.trackPoints[0].lat);
        this.map.panTo(point); // 地图中心点移到下一个点
        if (!this.marker) {
          this.marker = new BMap.Marker(point); // 创建标记
          this.map.addOverlay(this.marker); // 将标记添加到地图中
        } else {
          this.marker.setPosition(point); // 移动标记位置
        }
        if (!this.polyline) {
          this.polyline = new BMap.Polyline([point], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
          this.map.addOverlay(this.polyline);
        } else {
          this.polyline.getPath().push(point);
        }
        setTimeout(() => {
          this.trackPoints.shift(); // 移除已经绘制的点
          this.moveTrack(); // 递归继续移动下一个点
        }, 1000); // 每秒移动一次
      }
    }
  }
};
</script>

这段代码使用Vue框架和百度地图API创建了一个简单的地图应用，其中包含了初始化地图、加载轨迹点、移动标记和绘制轨迹线的逻辑。这个例子提供了一个基本的模板，可以根据实际需求进行扩展和修改。