HTML+JavaScript绘制真实运动轨迹需用Canvas或WebGL，基于带时间戳的坐标序列，经平面投影转换、requestAnimationFrame驱动、毫秒级插值重放，避免折线硬连、掉帧卡顿和定位漂移。
怎么用 HTML + JavaScript 画运动轨迹（不是 SVG 手动画）
不能只靠 <div> 移来移去——那不是轨迹，是跳帧。真要还原运动过程，得用 Canvas 或 WebGL 渲染带时间戳的坐标序列，再按毫秒级插值重放。
常见错误是把一串 lat/lng 坐标直接连成折线就叫“轨迹”，但实际设备上报点稀疏、有抖动、无时间信息，画出来是锯齿+漂移，根本看不出“运动”感。
- 必须保留原始时间戳（
timestamp字段），否则无法做匀速/加速度插值 - 坐标需先转为平面单位（如 Web Mercator 的
meter），避免高纬度变形拉伸 - Canvas 每帧用
requestAnimationFrame驱动，别用setTimeout——后者掉帧严重，轨迹会卡顿跳跃
Leaflet 或 Mapbox 怎么叠加平滑运动线（非静态 Polyline）
Leaflet 的 L.polyline 是静态的；想让线“长出来”，得手动控制每一段的 setLatLngs，配合时间切片。
Mapbox 的 map.addSource + line 图层也能动，但关键在数据源更新策略：不能整条线重设，要用 setData 只推增量坐标（比如每次加 1–3 个点），否则重绘开销大，地图卡死。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Leaflet 推荐用
L.PolylineDecorator插件，配合arrowheads路径装饰器显示方向 - Mapbox 中禁用
line-cap: 'round'，否则首尾圆角会让轨迹起点/终点模糊不清 - 两者都需提前调用
fitBounds包含全程范围，否则运动中地图乱晃
轨迹回放卡顿或不同步？检查这三个地方
不是代码写错了，大概率是渲染和数据节奏没对齐。典型现象：线在跑，小车图标停着；或者小车到了终点，线还差一截。
- 坐标数组和时间戳数组长度不一致 → 回放时
index越界，静默失败 - 用
Date.now()做播放基准，但没减去起始偏移 → 时间轴漂移，越往后越慢 - Canvas 绘制未用
clearRect清除上一帧，残留残影，看起来像拖尾或重影
一个最小可验证做法：const startTime = Date.now(); const elapsed = Date.now() - startTime;，再用 elapsed 算当前该走到第几个点，别依赖循环计数器。
手机端轨迹断续、点缺失？和 GPS 定位精度强相关
HTML 页面拿不到原生 GPS 采样率，navigator.geolocation.watchPosition 在 iOS Safari 上默认 10 秒才回调一次，且后台页面直接暂停定位。这不是 bug，是系统限制。
能做的只有妥协适配：
- 开启
enableHighAccuracy: true，但要提醒用户授权“精确位置”（Android 弹窗，iOS 需进设置手动开） - 用
maximumAge缓存最近有效点，避免空回调；用timeout设为 8000ms，防无限等待 - 收到点后立刻校验
coords.accuracy < 30（单位米），超了就丢弃——别硬画模糊轨迹
真正连续的轨迹，得靠原生 App + 后台持续采集，网页只能当轻量回放端用。这点容易被忽略，但决定了方案边界。
