vue高德地图实现实时路线轨迹

要实现实时路线轨迹，您需要使用高德地图的JavaScript API和Vue.js框架。以下是一些步骤：

1. 在Vue.js项目中引入高德地图JavaScript API。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>

2. 创建一个Vue组件，并在其中创建一个地图实例。

<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map("map", {
        center: [116.397428, 39.90923],
        zoom: 13,
      });
    },
  },
};
</script>

3. 使用高德地图的定位功能获取当前位置，并在地图上显示。

initMap() {
  // 创建地图实例
  this.map = new AMap.Map("map", {
    zoom: 13,
  });

  // 获取当前位置
  let geolocation;
  this.map.plugin("AMap.Geolocation", function () {
    geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      timeout: 10000, // 超过10秒后停止定位，默认：无穷大
      maximumAge: 0, // 定位结果缓存0毫秒，默认：0
      showButton: true, // 显示定位按钮，默认：true
      buttonPosition: "RB", // 定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true, // 定位成功后将定位精度范围自适应到地图视野范围内，默认：true
    });
    this.map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, "complete", onComplete);
    AMap.event.addListener(geolocation, "error", onError);
  });

  // 定位成功回调函数
  function onComplete(data) {
    let lnglat = [data.position.lng, data.position.lat];
    let marker = new AMap.Marker({
      position: lnglat,
      icon: "https://webapi.amap.com/images/0.png",
      offset: new AMap.Pixel(-13, -30),
    });
    marker.setMap(this.map);
    this.map.setCenter(lnglat);
  }

  // 定位失败回调函数
  function onError(data) {
    console.log("定位失败");
  }
},

4. 创建一个标记，并将标记移动到指定位置。

<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map("map", {
        zoom: 13,
      });

      // 创建标记
      this.marker = new AMap.Marker({
        icon: "https://webapi.amap.com/images/0.png",
        offset: new AMap.Pixel(-13, -30),
      });
      this.marker.setMap(this.map);

      // 移动标记
      let lnglat = [116.397428, 39.90923];
      let path = [
        [116.397428, 39.90923],
        [116.407428, 39.90923],
        [116.417428, 39.90923],
        [116.427428, 39.90923],
      ];
      let index = 0;

      setInterval(() => {
        if (index >= path.length) {
          index = 0;
        }
        let lnglat = path[index];
        this.marker.setPosition(lnglat);
        this.map.setCenter(lnglat);
        index++;
      }, 1000);
    },
  },
};
</script>

这样，您就可以在Vue.js中使用高德地图API实现实时路线轨迹了。上述示例中，我们创建了一个地图实例和一个标记，并将标记移动到指定位置。您可以根据自己的需求修改代码。