Vue 3 + TypeScript + 高德地图 | 实战：多车轨迹回放（点位驱动版）

一、前言

在车辆管理系统、车队调度平台等场景中，轨迹回放是一个常见功能：

• 用户选择时间范围 → 系统调取车辆在该时间段的 GPS 数据；

• 在地图上动态绘制轨迹，车辆 Marker 随轨迹点顺序移动；

• 支持 播放、暂停、快退、快进、倍速控制。

⚠️ 本文的回放逻辑 不是根据时间戳来精确控制每一步间隔，而是以轨迹点的先后顺序为驱动，每隔固定的时间（如 1 秒）推进到下一个点，从而简化实现逻辑。

实际开发中的选择

• 如果目标是 快速回放轨迹，展示路线 → 选择 点驱动；

• 如果目标是 尽量贴近真实行驶过程 → 选择 时间戳驱动；

• 在一些系统中，可以 两种模式并存，用户可切换：

  • 点驱动：演示路线；

  • 时间戳驱动：分析真实行驶情况。

      

---

二、功能效果

• 轨迹按顺序绘制，车辆 Marker 动态移动；

• 每次间隔固定（例如 1 秒 → 下一个轨迹点）；

• 支持 播放、暂停、重新播放；

• 支持 快退 / 快进；

• 支持 1×、2×、4×、8× 倍速；

• 自动缩放视野，保持轨迹可见。

---

三、父组件：轨迹回放控制器

父组件负责：

• 维护播放状态；

• 绑定按钮与进度条；

• 与地图子组件交互。

代码示例

<!-- 地图 -->
<GaoDeMap 
ref="mapRef" 
:zoom="12" 
v-model:playbackIndex="playbackIndex"
v-model:isPlaybackCompleted="isPlaybackCompleted" 
@progressUpdate="onProgressUpdate"
:playbackPoints="trackPoints" />

<!-- 回放控制 -->
<div class="play-box"><p class="title">回放控制</p><div class="icon-group"><!-- 快退⏪--><StepBackwardOutlined class="icon" @click="rewind" /><!-- 暂停｜播放 --><div class="pause-box" @click="playAndPause"><PauseOutlined v-if="isPlay" class="pause-icon" /><CaretRightOutlined class="play-icon" v-else /></div><!-- 快进⏩ --><StepForwardOutlined class="icon" @click="fastForward" /></div><!-- 进度条 --><a-progress :percent="defaultPercent" :show-info="false" /><div class="time-group"><span>{{ dayjs(form.startTime).format('HH:mm:ss') }}</span><span>{{ dayjs(form.endTime).format('HH:mm:ss') }}</span></div>
</div>

<!-- 回放速度 -->
<a-form-item label="回放速度" name="startAddress"><a-select ref="select" v-model:value="form.speed" :options="speedOptions" placeholder="请选