vue高德地图制作动态轨迹

要制作动态轨迹，需要使用高德地图提供的JavaScript API和Vue框架进行开发。

首先，你需要在Vue项目中引入高德地图的JavaScript API，可以使用以下代码：

<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

其中，key值是你在高德地图开放平台申请的API Key。

接着，你需要在Vue组件中创建一个地图容器，可以使用以下代码：

<template>
  <div id="map-container" style="height: 100%;"></div>
</template>

然后，你需要在Vue组件的mounted()函数中初始化地图对象，并绑定地图事件，可以使用以下代码：

mounted() {
  // 初始化地图对象
  this.map = new AMap.Map('map-container', {
    zoom: 13, // 设置地图缩放级别
    center: [116.397428, 39.90923] // 设置地图中心点坐标
  });
  // 绑定地图事件
  AMap.event.addListener(this.map, 'complete', () => {
    // 地图加载完成后执行的操作
  });
}

接下来，你需要获取动态轨迹数据，并在地图上进行绘制。你可以使用高德地图提供的Polyline（折线）类来绘制轨迹线条，可以使用以下代码：

// 获取动态轨迹数据
const data = [
  [116.403322,39.920255],
  [116.410703,39.897555],
  [116.402292,39.892353],
  [116.389846,39.891365]
];
// 创建轨迹线条
const polyline = new AMap.Polyline({
  path: data, // 设置轨迹线条坐标数据
  strokeColor: '#3366FF', // 设置轨迹线条颜色
  strokeWeight: 5 // 设置轨迹线条宽度
});
// 将轨迹线条添加到地图上
this.map.add(polyline);

最后，你可以使用高德地图提供的Marker（标记）类来添加起始点和终点标记，可以使用以下代码：

// 添加起始点标记
const startMarker = new AMap.Marker({
  position: data[0], // 设置标记位置为起始点
  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png' // 设置标记图标
});
// 添加终点标记
const endMarker = new AMap.Marker({
  position: data[data.length - 1], // 设置标记位置为终点
  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png' // 设置标记图标
});
// 将标记添加到地图上
this.map.add([startMarker, endMarker]);

以上就是使用Vue和高德地图API制作动态轨迹的基本流程，你可以根据实际需求进行进一步的开发和优化。