uni-app 轨迹回放实现（场景 + 方案）——2026 0309

核心场景

出行类 APP（如代驾 / 配送 / 共享单车）：需展示骑手 / 车辆从起点到终点的移动轨迹，支持「匀速播放、暂停、倍速、进度拖拽」等核心操作。

实现思路（精简版）

1. 数据准备：标准化轨迹数据结构

后端返回轨迹点数组，包含核心字段： js

复制代码

[
  { lng: 116.40, lat: 39.90, time: 1710000000 }, // 经纬度+时间戳
  { lng: 116.41, lat: 39.91, time: 1710000010 },
  // ... 更多轨迹点
]

预处理：计算轨迹总时长、相邻点距离 / 时间差，为匀速播放做准备。

2. 地图渲染：跨端地图 SDK 适配

小程序端 ：使用微信 / 支付宝原生地图组件（map），通过 polyline 绘制轨迹线，marker 标记当前位置；
APP/H5 端 ：集成高德 / 百度地图 SDK（如 amap-wx.js），调用轨迹绘制 API；

核心代码（跨端通用）： vue

复制代码

<template>
  <map :polyline="[{ points: trackPoints, color: '#0088ff' }]" :markers="currentMarker"></map>
</template>
<script setup>
const trackPoints = ref([]); // 所有轨迹点
const currentMarker = ref({}); // 当前位置标记
// 初始化轨迹数据
const initTrack = (data) => {
  trackPoints.value = data.map(item => ({ longitude: item.lng, latitude: item.lat }));
};
</script>

3. 轨迹回放核心逻辑：时间轴驱动

核心原理：通过 setInterval/requestAnimationFrame 按时间步长遍历轨迹点，更新当前位置标记；

关键控制逻辑： js

复制代码

let timer = null;
let currentIndex = 0; // 当前轨迹点索引
const speed = 1; // 播放倍速

// 开始播放
const playTrack = () => {
  timer = setInterval(() => {
    if (currentIndex >= trackPoints.value.length) {
      clearInterval(timer);
      return;
    }
    // 更新当前位置标记
    currentMarker.value = {
      longitude: trackPoints.value[currentIndex].longitude,
      latitude: trackPoints.value[currentIndex].latitude
    };
    currentIndex++;
  }, 1000 / speed); // 按倍速调整时间间隔
};

// 暂停/倍速/拖拽进度：清空timer，重置currentIndex后重新播放
const pauseTrack = () => clearInterval(timer);

4. 跨端优化：解决性能 / 兼容问题

性能：轨迹点过多（如 1000+）时，先抽稀（保留关键拐点）再渲染，避免地图卡顿；
兼容：小程序端 map 组件层级最高，回放控制按钮需用 cover-view 包裹；
体验：播放时地图自动跟随当前标记居中，调用 map 组件的 moveToLocation 方法。

总结

回答核心需抓 3 个关键点：

数据层：标准化经纬度 + 时间戳的轨迹数据，预处理计算时长 / 距离；
渲染层：跨端适配地图 SDK，用 polyline 绘轨迹、marker 标当前位置；
控制层：时间轴驱动遍历轨迹点，封装播放 / 暂停 / 倍速核心方法，兼顾性能优化。

核心思路：轨迹回放本质是「时间轴 + 地图元素动态更新」，跨端开发需优先适配各端地图组件特性，通过数据预处理和定时器控制实现流畅的回放体验。