企业官网建设流程全解析

前阵子接了个物流大屏的项目，需求本身不复杂：地图上画一条配送轨迹，一辆小车图标沿着轨迹匀速移动，轨迹还要随着后端每隔几秒推送的新坐标“逐渐变长”，并且支持暂停、继续、调速。我一开始想得很简单——高德地图嘛，画线用 Polyline，移动用定时器更新 Marker 坐标不就行了？结果真正动手才知道，“让标记点沿一条动态路线平滑移动”这件事，远没有一个现成 API 那么轻松。折腾完moveAlong，又解决了一堆动态追加、坐标系、销毁清理的坑之后，我觉得很有必要把整个过程复盘成一篇实战记录。

这篇博文不是高德官方文档的翻译，而是我从一个 Vue 开发者视角出发，完整拆解用AMap.Marker.moveAlong实现“动态绘制路线”时真正会碰到的技术选型、参数陷阱、队列改造和性能优化。如果你也在做轨迹回放、实时配送、车辆跟踪、骑行记录这类功能，并且用的是 Vue + 高德地图，这篇应该能帮你少走不少弯路。

1. moveAlong 解决的是“移动”问题，而 Polyline 只解决“画线”

1.1 地图上的“路线”和“动画”是两套覆盖物体系

新手最容易踩的第一个认知误区，就是把“动态绘制路线”等同于“给 Polyline 加动画”。实际上在高德地图 JavaScript API 里，这是两套完全独立的覆盖物体系：

• Polyline（折线）：负责将一串经纬度坐标描绘成一条可见的路线，它是静态的，没有“播放”的概念。
• Marker（标记点）：负责在地图上的某个经纬度显示一个小图标。moveAlong就是挂在 Marker 实例上的方法，让 Marker 的 position 在多个坐标点之间依次过渡，产生动画效果。

这两者需要配合使用：Polyline 负责把整条路径画出来，Marker 负责沿着这条路径“跑”起来。如果你只创建 Polyline，车子不会动；如果只调用moveAlong，你会看到车标在地图上飘，但地面上没有轨迹线。所以真正的“动态绘制路线”，其实是“动态维护 Polyline 的 path + 用 moveAlong 驱动 Marker”的双线操作。

1.2 moveAlong 的基础用法与事件模型

先从最基础的静态路线说起。假设后端已经给出了一条完整路径，你希望在 Vue 组件里让小车沿路径移动，代码大致是这样：

// 假设 map 已经初始化，marker 已经创建 const path = [ [118.05, 24.45], [118.055, 24.46], [118.062, 24.468], [118.071, 24.472] ]; marker.moveAlong(path, 60, true, false);

这里 60 表示速度，单位是 km/h。第三个参数autoRotation是让 Marker 自动旋转以匹配路径方向，第四个参数autoView则决定是否让地图视野自动适配整条路径。这两个参数的使用体会我会在第三章详细说，这里先不展开。

moveAlong是异步动画，不会阻塞 JavaScript 主线程。你可以通过事件监听动画的进度和结束：

• moving：每一次坐标变化时触发，事件参数里会携带当前位置、剩余距离等信息。
• movealong：当整条路径播放完成时触发。

需要停止动画时调用marker.stopMove()。这个“停止”逻辑在组件销毁、路由切换时极其重要，后面第五章踩坑部分会专门讲。

2. Vue 工程里接入高德地图，我选的加载姿势

2.1 三种主流接入方式对比

在 Vue 项目里接入高德地图，网上能搜到很多方案，但落地时差别很大。我把它们列成了一张对比表：

我最后选择的是@amap/amap-jsapi-loader。原因有三点：

1. 官方维护，API 设计和文档一致，不用担心第三方封装跟高德版本脱节。
2. Promise 化加载，可以很方便地在 Vue 组件里等待 SDK 就绪后再初始化地图。
3. JS API 2.0 引入了安全密钥，官方 loader 对securityJsCode的支持是最自然的。

2.2 封装一个独立的 loader 模块

我习惯把“加载 SDK”和“初始化地图”拆成两层，而不是在组件里直接new AMapLoader(...).load()。这样同一个应用里多个地图组件能共享同一个加载 Promise，避免重复加载。

// utils/amapLoader.js import AMapLoader from '@amap/amap-jsapi-loader'; let mapPromise = null; export function loadAMap() { if (window.AMap) { return Promise.resolve(window.AMap); } if (!mapPromise) { mapPromise = new AMapLoader({ key: 'your_key', version: '2.0', // 开发环境可以传入 securityJsCode，生产环境建议走代理避免暴露 securityJsCode: 'your_secret_code', plugins: ['AMap.MoveAnimation', 'AMap.Scale', 'AMap.ToolBar'] }).load(); } return mapPromise; }

注意，AMap.MoveAnimation这个插件类其实是高德官方提供的“轨迹动画管理”工具，比直接裸用marker.moveAlong多了一些现成的播放控制。我后面会对比它和我们自己封装方案的区别。如果你只需要固定路线回放，直接用AMap.MoveAnimation能省不少事；但动态追加路线的场景，它和moveAlong有同样的问题——一次性接收完整路径，没办法增量喂数据。

2.3 初始化地图的生命周期细节

在 Vue 组件里初始化地图，有两个细节必须注意。第一，容器必须已经渲染并且有高度，否则地图初始化后是灰色空白。第二，组件销毁时一定要销毁地图实例，否则地图内部的事件循环会残留，造成内存泄漏和后台动画空跑。

一个 Vue 3 组合式函数里的标准初始化流程大概是这样：

<template> <div ref="mapContainer" class="map-container"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import { loadAMap } from '@/utils/amapLoader'; const mapContainer = ref(null); let mapInstance = null; onMounted(async () => { const AMap = await loadAMap(); mapInstance = new AMap.Map(mapContainer.value, { viewMode: '3D', zoom: 15, center: [118.05, 24.45], mapStyle: 'amap://styles/light' }); }); onBeforeUnmount(() => { if (mapInstance) { mapInstance.destroy(); mapInstance = null; } }); </script> <style scoped> .map-container { width: 100%; height: 400px; } </style>

这里有一个很关键的 Vue 响应式陷阱：千万不要把mapInstance放到ref或reactive里，尤其不要对 AMap 实例做深层响应式代理。Vue 3 的reactive默认对对象做 Proxy 化，会拦截高德 API 内部对实例属性的访问和修改，严重时会导致地图事件失效、动画卡死。我用shallowRef或者普通变量配合onMounted/onBeforeUnmount来保存地图实例，是最安全的做法。

3. moveAlong 参数里的三个隐藏陷阱：speed 单位、autoView 语义与路径点数量

3.1 speed 是速度，不是时间

很多第一次用moveAlong的人会下意识以为第二个参数是“动画时长多少毫秒”，错了。第二个参数是速度，单位是 km/h，也就是“这个 Marker 每小时在地图上走多少公里”。

这个设计其实是贴合真实业务场景的。轨迹回放的时候，你拿到的速度值往往来自车辆上报的真实 GPS 速度，直接传给moveAlong就能1:1还原真实运动快慢。但演示场景里，你通常希望“播放得快一点”，这时候就要自己换算。

假设你的业务场景是“每 3 秒由后端推送一个新坐标，两个坐标之间直线距离约 50 米”，那你期望的动画速度大约是 50 米/3 秒 ≈ 16.7 米/秒。换算成 km/h 就是乘以 3.6，约等于 60 km/h。代码里可以直接让业务方配置一个“人为速度”，比如moveAlong(path, 60)差不多是每秒 16.7 米，视觉上刚好是“清晰的缓缓移动”。

反过来，如果你拿到的是“希望几秒内走完一段已知路径”的需求，就得反推速度：路径总长 1 公里，希望 10 秒走完，那需要的速度是 1km / (10 / 3600)h = 360 km/h。这个速度在真实世界里不合理，但作为演示是可以接受的。

3.2 autoView 不是“镜头跟随”，而是“视野缩小到能装下整条路”

moveAlong的第四个参数autoView是误解重灾区。我见过不少同事想实现“小车移动时镜头跟着小车走”的效果，直接传true，结果反而发现地图 zoom 被瞬间拉到很大，车子变成地图上的一个小点，体验非常差。

原因在于autoView的真实语义是：动画开始前，高德会自动调整地图视野，让传入的 path 全部落在可视范围内。如果路径很长（跨了好几个街区），地图会缩小 zoom 来装下整条路径，而不是“跟着车头视角走”。

所以动态轨迹场景下，我一般把autoView设为false，配合高德的map.setFitView()或者map.setZoomAndCenter()手动控制视野。如果你真的想实现“镜头跟随车辆”，需要在moving事件里不停调用map.setCenter(marker.getPosition())，并且要小心频繁 setCenter 带来的卡顿感，后面第6章会聊优化。

3.3 路径点数量与顺序的硬性约束

moveAlong要求 path 至少有两个点，否则直接不执行或报错。这个“至少两个点”在动态追加场景里尤其容易踩坑：后端只推了 1 个新点时，你是不能让小车动的，得等第二个点到达后再启动动画。

另外路径点的顺序就是移动顺序，如果后端推送坐标的顺序有抖动（比如排错了队、时间戳乱序），播放出来的路线就会来回乱窜。我在自己的播放器封装里专门加了一个排序逻辑：按 time 字段升序排列后再进队列。这点放到第四章细说。

还有一个地理层面的坑：如果直接把两个相距很远的经纬度点连线丢给moveAlong，地图上是直线动画，不会绕路。对于城区配送这种场景，真实路线应该先通过高德的路径规划服务（比如AMap.Driving）拿到一串经过路口的路形点，再交给moveAlong，否则就会出现车“穿楼、跨海”的诡异效果。轨迹回放如果只是展示历史轨迹，通常历史轨迹本身就是一串密集的点，直接用没问题；但如果是“配送中实时规划路径”，路径规划是少不了的。

4. 核心改造：把一次性的 moveAlong 变成可持续消费的轨迹播放队列

4.1 为什么不能直接 moveAlong 整条路径

现在回到本文标题的核心场景——“动态绘制路线”。什么叫动态？就是整条路线在你点击“开始”时并不完整，它会随着业务数据源源不断地追加。举个例子：

1. 初始阶段，后端只下发两个点：A -> B，车先出发。
2. 3 秒后，后端推来 C 点，路线变成 A -> B -> C。
3. 再过 3 秒，后端推来 D 点，路线继续延伸。

如果你天真地写marker.moveAlong(realTimePath, 60)，然后在下一次推送时往realTimePath数组里push新坐标，期望动画沿用到新点——结果是没有任何效果。因为moveAlong在调用时已经把路径状态固化到内部迭代器里了，你往原数组里追加数据，并不会通知内部的迭代逻辑。而且如果你直接修改正在被动画消费的数组，甚至可能引发索引错乱，让车倒退或者瞬移。

这也是为什么我选择自己封装一个“分段播放器”，而不是依赖marker.moveAlong一次喂一整条路径。

4.2 分段播放器的设计与实现

我的设计思路是：把“动态路径”看成一段一段的“小路径”组成的队列。当前正在播放的路径段走完之后，立刻从队列里取下一段继续播放。

// utils/TrackPlayer.js export default class TrackPlayer { constructor(map, marker, polyline, options = {}) { this.map = map; this.marker = marker; this.polyline = polyline; this.speed = options.speed || 60; this.rotation = options.rotation ?? true; this.allPoints = []; // 全部轨迹点，用来更新 polyline this.pendingQueue = []; // 等待播放的路径段 this.isPlaying = false; this._bindEvents(); } // 首帧进入：传入至少两个点 start(points) { if (points.length < 2) { console.warn('TrackPlayer: 至少需要两个点才能开始播放'); return; } this.allPoints = [...points]; this.polyline.setPath(this.allPoints); for (let i = 1; i < points.length; i++) { this.pendingQueue.push([points[i - 1], points[i]]); } this._playNext(); } // 动态追加新点 addPoint(newPoint) { const lastPoint = this.allPoints[this.allPoints.length - 1]; if (!lastPoint) return; this.allPoints.push(newPoint); this.polyline.setPath(this.allPoints); // 正在播放时，新的一段排进队列，等当前段结束 this.pendingQueue.push([lastPoint, newPoint]); } resume() { if (!this.isPlaying && this.pendingQueue.length > 0) { this._playNext(); } } pause() { this.isPlaying = false; this.marker.stopMove(); } stop() { this.isPlaying = false; this.pendingQueue = []; this.marker.stopMove(); } _playNext() { if (this.pendingQueue.length === 0) { this.isPlaying = false; return; } const segment = this.pendingQueue.shift(); this.isPlaying = true; // 每次只播放一小段路径 this.marker.moveAlong(segment, this.speed, this.rotation, false); } _bindEvents() { this.marker.on('movealong', () => { // 当前段播放结束，尝试播下一段 if (this.pendingQueue.length > 0) { this._playNext(); } else { this.isPlaying = false; } }); } }

这里的关键在于addPoint方法：它永远只把“最后一点 -> 新点”这一段塞进队列。当前正在播放的段不会被中断，因此视觉上是连续平滑的。每次setPath更新 Polyline，又让轨迹线跟随新坐标变长，实现真正的“动态绘制路线”。

4.3 为什么不在一个 path 里塞全部点

可能有朋友会问：那我干脆每次推送新点时调用marker.moveAlong传入“从当前位置开始的剩余全部路径”，不也能增量吗？

可以，但有两个问题：

1. 每次调用moveAlong前需要stopMove，而停止后重新启动，Marker 的动画状态会有肉眼可见的闪断和重新加速，平滑度明显下降。
2. 后续点位越多，每次传入的 path 就越长，动画内部的迭代开销和内存压力都更大。按段播放时，每一段只有两个点，动画消耗几乎可以忽略。

所以“队列消费”才是动态轨迹播放的正解。这个 TrackPlayer 本身和 Vue 框架无关，是一个纯 JavaScript 类，我建议你在任何框架里都保持这种独立性，不要让它依赖 Vue 的生命周期，这样将来无论是 React 还是小程序都能复用。

4.4 在 Vue 3 组件里接入 TrackPlayer

TrackPlayer 创建好之后，在 Vue 组件里只需要做好两件事：初始化时创建 Marker、Polyline，以及把后端的实时数据流addPoint进去。

<template> <div class="map-wrap"> <div ref="mapContainer" class="map-container"></div> <button @click="togglePlay">{{ isPlaying ? '暂停' : '继续' }}</button> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import { loadAMap } from '@/utils/amapLoader'; import TrackPlayer from '@/utils/TrackPlayer'; const mapContainer = ref(null); const isPlaying = ref(true); let map = null; let marker = null; let polyline = null; let player = null; onMounted(async () => { const AMap = await loadAMap(); map = new AMap.Map(mapContainer.value, { viewMode: '3D', zoom: 15, center: [118.05, 24.45] }); marker = new AMap.Marker({ position: [118.05, 24.45], icon: new AMap.Icon({ image: 'https://example.com/car.png', size: new AMap.Size(40, 40) }) }); map.add(marker); polyline = new AMap.Polyline({ path: [], strokeColor: '#3366FF', strokeWeight: 6, strokeStyle: 'solid' }); map.add(polyline); player = new TrackPlayer(map, marker, polyline, { speed: 60, rotation: true }); // 模拟后端每 3 秒推一个新坐标 const mockPoints = [ [118.05, 24.45], [118.056, 24.458], [118.064, 24.463], [118.073, 24.471], [118.082, 24.478] ]; player.start(mockPoints.slice(0, 2)); let idx = 2; mockTimer = setInterval(() => { if (idx < mockPoints.length) { player.addPoint(mockPoints[idx]); idx++; } else { clearInterval(mockTimer); } }, 3000); }); function togglePlay() { if (isPlaying.value) { player.pause(); } else { player.resume(); } isPlaying.value = !isPlaying.value; } onBeforeUnmount(() => { clearInterval(mockTimer); if (player) { player.stop(); } map?.destroy(); }); </script>

这套结构跑通之后，你只需要把mockPoints换成 WebSocket 或者轮询接口的数据流即可。我用这种方案在好几个项目里复用过，基本上把TrackPlayer一拷就是一个新功能。

5. 实测踩坑全记录：从空白地图到坐标系漂移的完整排查链路

5.1 现象一：地图一片灰色空白，控制台还报错

排查过程：我第一次把地图塞进一个el-tabs的 Tab 面板里，切到地图页时对话框显示的是灰色网格和几个控件，地图图层完全不显示。当时第一反应是 Key 配错了，结果打开控制台发现高德报的是Map container has no size之类的提示。

根因分析：高德地图初始化时，会读取容器 DOM 当前的实际宽高来决定渲染范围。如果容器处于display: none或者宽度高度为 0（比如v-show隐藏、el-tabs首次未激活），地图初始化就完成在了一个 0 尺寸的画布上，之后即使容器显示了，地图也不会自动重新计算尺寸。

解决方案：确保地图容器先渲染并且有尺寸后再初始化地图。如果在el-tabs里，推荐监听 Tab 切换事件，在切换到地图 Tab 之后调用map.resize()。map.resize()是高德提供的方法，专门用来重新获取容器尺寸并刷新视图。

我在组件里维护了一个mapReady标志，每次 Tab 切换回来时都执行if (mapInstance && mapInstance.resize) { mapInstance.resize(); }，这个问题就再也没出现过。

5.2 现象二：切换路由之后，小车还在后台跑，页面掉帧

排查过程：项目是路由跳转的 SPA 页面，从轨迹页跳到别的页面再切回来，发现页面经常卡顿，CPU 占用还降不下去。一开始以为是地图内存泄漏，后来在onBeforeUnmount里疯狂console.log，才发现stopMove和destroy都写了，问题出在setInterval模拟推送上——定时器没清，它还在持续往队列里塞点。

根因分析：一个完整的“播放器销毁”必须做到三件事：

1. 清掉所有定时器/轮询/WebSocket 订阅。
2. marker.stopMove()停掉动画，防止后台空跑。
3. map.destroy()销毁地图，移除地图内部的事件监听。

我的TrackPlayer.stop()方法本来已经做了marker.stopMove()，但组件里的mockTimer没有clear。真实的项目里更隐蔽的是 WebSocket 订阅：很多人只在地图组件里onMounted时subscribe，忘了在onBeforeUnmount时unsubscribe，结果地图都销毁了，消息还在源源不断进来。

解决方案：把“数据订阅”和“动画播放”都做成可清理的。在组件卸载前先停止数据源，再停动画，最后销毁地图。顺序不能反：先停数据源才能避免动画播放过程中突然断了路径。

5.3 现象三：路径点明明没错，车却开到了根本不存在的区域

排查过程：有一次接真机 GPS 轨迹调试，车辆实际在某城市主干道上跑，地图上的点却偏移了将近 300 米，偶尔还会“飘”到看不到的地方。我先怀疑是高德定位精度问题，后来发现后端给的原始坐标是 WGS-84（GPS 设备输出的国际标准坐标系），而高德地图用的是 GCJ-02（火星坐标系）。

根因分析：国内外地图服务对坐标系的处理不一样，很多 GPS 设备默认输出 WGS-84，但国内的地图 SDK 展示标准是 GCJ-02，两者之间有一个非线性偏移。直接用 WGS-84 坐标往高德地图上怼，必然出现几百米的偏移。如果轨迹在沿海地区，甚至可能直接飘到海里。

解决方案：在后端或者前端做坐标转换。前端最简单的方式是使用开源的坐标转换库gcoord，一行代码就能把 WGS-84 转成 GCJ-02：

import gcoord from 'gcoord'; const result = gcoord.transform( [118.05, 24.45], gcoord.WGS84, gcoord.GCJ02 );

这个坑我建议在项目初期就统一约定：进地图组件之前的坐标一律统一为 GCJ-02。如果后端愿意做转换，前端就省事；如果后端不做，前端就封装一个转换工具函数，在addPoint之前统一转一遍。千万别只转首尾点，那样轨迹中间依然会偏移。

5.4 现象四：Tab 切走再切回来，动画直接跳到终点

排查过程：在el-tabs场景里，轨迹正在播放时切到别的 Tab，过几秒切回来，发现小车已经停在终点，中间路径全部跳过了。

根因分析：浏览器的动画机制（requestAnimationFrame）在页面不可见或容器被隐藏时会暂停或降频。高德内部的moveAlong动画引擎依赖其内部的时间戳计算，一旦页面被切到后台，动画时间戳可能发生跳变，恢复后判定“这段路径已经过了很久”，于是直接让 Marker 跳到目标点。这其实是很多地图动画库的通用行为，不单单是高德的问题。

解决方案：在 Tab 切换事件里主动暂停播放器，切回来时再恢复。如果你用的是v-show切换控件，还要记得调用map.resize()。

tabsRef.addEventListener('change', (tab) => { if (tab.name === 'map') { map.resize(); player.resume(); } else { player.pause(); } });

把“切走即暂停、切回即恢复”当做一条默认规范来写，能避免绝大多数诡异的跳帧问题。

6. 性能调优与体验细节：抽稀、图层管理与 autoRotation 的取舍

6.1 点位抽稀：少传点，动画更顺

动态轨迹跑久了，allPoints数组会越来越长。如果后端每隔 5 秒推一个点，一小时就是 720 个点，全量传给 Polyline 让地图绘制，移动端会明显掉帧。而且相邻两个 GPS 点之间距离往往只有几十米甚至几米，肉眼几乎看不出区别，完全没有必要全部绘制。

我的经验是做一个“距离阈值抽稀”：新点与上一个已采纳点之间的距离小于某个阈值（比如 30~50 米）时，更新轨迹端点但不追加动画队列；超过阈值才真正追加。

function shouldAddPoint(newPoint, lastPoint, minDistance = 30) { if (!lastPoint) return true; const dx = newPoint[0] - lastPoint[0]; const dy = newPoint[1] - lastPoint[1]; const dist = Math.sqrt(dx * dx + dy * dy) * 111320; // 粗略转换为米 return dist >= minDistance; }

如果点位已经很密但轨迹复杂，还可以进一步用 Douglas-Peucker 折线抽稀算法保留拐点，去掉冗余直线段上的中间点。轨迹回放时通常保留 100~200 个关键点就足够展示路线形态了。

6.2 把 Marker 和 Polyline 放到合适的图层里

高德 2.0 之后的图层体系里，可以创建AMap.VectorLayer来统一管理 Marker、Polyline 这类矢量覆盖物。如果你只是单轨迹播放，直接map.add(marker)没问题；但如果地图上叠加了多条轨迹、几十个 Marker，我会建议把它们都塞进同一个 VectorLayer，方便统一控制显隐和销毁。

const layer = new AMap.VectorLayer({ zooms: [3, 20] }); layer.add([marker, polyline]); map.add(layer);

这样在清屏时只需要layer.clear()，不用逐个 remove。对内存和渲染性能都有帮助。

6.3 autoRotation 的取舍：图标要不要跟着方向转

moveAlong(path, speed, true)的第三个参数autoRotation如果设为true，Marker 会随着路径方向自动旋转角度，适合箭头、飞机、汽车这类带有方向性的图标。

但这个参数在两种情况下反而添乱：

1. 车标图标本身是“顶视图渲染”的，旋转后看起来不如固定朝上清晰。
2. 转弯点很多、路径很曲折的时候，Marker 旋转会非常频繁，视觉上有点“抽搐”。

我的建议是：汽车配送类场景开autoRotation，体验更真实；纯展示类场景（比如只是显示车的最新位置）就关掉，把车标固定朝上。如果你想要更精细的朝向控制，可以监听moving事件，根据当前位置与下一目标点计算角度，再手动设置marker.setRotation()，但说实话日常用不上这么细。

6.4 播放体验的一些小细节

• 播放速度调节：可以在TrackPlayer里加一个speed的 setter，暂停后调用_playNext()时用新速度。注意不要边播放边改速度，否则moveAlong内部状态不会立即生效。
• 进度条显示：按“已消费段数 / 总段数”算百分比，在movealong事件里更新。不要按已播放距离算，因为坐标距离计算还要考虑地球曲率，对进度条来说没必要。
• 结束时处理：所有路径播放完毕后，把isPlaying置为false，同时将 Marker 图标切到“到达”样式（比如改成红色圆点），再触发一个自定义事件让产品端知道“轨迹播放结束”。
• 清屏重播：如果用户要重新开始，重新player.start()之前记得player.stop()清空队列和allPoints，Polyline 的 path 也要重置。

尾声：这个项目的复盘体会

回头再看这个需求，moveAlong其实只是一个“基础能力”，真正费劲的是怎么把一条流式增长的实时数据喂给一个“一次性消费”的动画 API。我最后落地的核心其实就两件事：一是把整条路径切分成一段一段的队列，二是让 Polyline 的 path 始终跟随最新坐标。

这段经历给我最大的感触是：地图动画这类功能，demo 和线上真实跑起来完全是两个项目。demo 只要moveAlong一行 API 就够，线上要面对坐标系漂移、容器隐藏、路由切换、后端推流乱序、点位冗余等一堆问题。好在把这些坑都填平之后，这条“动态绘制路线”的流程是可以沉淀成通用工具的。我现在基本上一看到“地图小车轨迹移动”需求，就直接把TrackPlayer类拿出来，再配一个数据源适配层，半小时内就能出一个可跑版本。

最后送给正在做类似需求的朋友一个小技巧：调试阶段一定要先用 mock 点把播放器跑通，再接真实后端推送。真实数据源一旦接入，排查问题时的变量太多，你会分不清是坐标问题、推流问题还是动画问题。先用固定坐标把动画链路调稳定，再打开数据开关，整个调试体验会顺很多。