当前位置：首页 > VUE

vue地图轨迹实现

2026-02-10 18:48:11VUE

实现Vue地图轨迹的基本步骤

安装地图库，如高德地图或百度地图的Vue组件。以高德地图为例，通过npm安装：

npm install @amap/amap-jsapi-loader --save

在Vue组件中引入并初始化地图：

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      path: [
        [116.478935, 39.997761],
        [116.478939, 39.997825]
      ]
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图Key',
        version: '2.0'
      }).then((AMap) => {
        this.map = new AMap.Map('mapContainer', {
          viewMode: '2D',
          zoom: 13,
          center: [116.397428, 39.90923]
        });
        this.drawPolyline();
      });
    }
  }
}

绘制轨迹线的方法

使用高德地图的Polyline类绘制轨迹线：

drawPolyline() {
  const polyline = new AMap.Polyline({
    path: this.path,
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 1,
    strokeColor: '#3366FF',
    strokeOpacity: 1,
    strokeWeight: 6,
    strokeStyle: 'solid'
  });
  this.map.add(polyline);
  this.map.setFitView([polyline]);
}

动态更新轨迹的实现

通过定时器模拟实时轨迹更新：

startTracking() {
  let index = 0;
  this.timer = setInterval(() => {
    if (index < this.path.length) {
      this.path.push([
        this.path[index][0] + Math.random() * 0.01,
        this.path[index][1] + Math.random() * 0.01
      ]);
      this.drawPolyline();
      index++;
    } else {
      clearInterval(this.timer);
    }
  }, 1000);
}

轨迹动画效果的添加

使用高德地图的moveAlong方法实现轨迹动画：

addMovingMarker() {
  const marker = new AMap.Marker({
    map: this.map,
    position: this.path[0],
    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
  });

  marker.moveAlong(this.path, {
    duration: 1000 * this.path.length,
    autoRotation: true
  });
}

轨迹点的标记处理

在关键位置添加标记点：

addMarkers() {
  this.path.forEach((point, index) => {
    new AMap.Marker({
      position: point,
      content: `<div class="marker">${index + 1}</div>`,
      offset: new AMap.Pixel(-10, -10)
    }).addTo(this.map);
  });
}

样式优化建议

在组件的style部分添加轨迹线样式：

vue地图轨迹实现

#mapContainer {
  width: 100%;
  height: 500px;
}

.marker {
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}