企业官网建设流程全解析

简介：这份资源围绕高德地图历史轨迹回放功能展开，面向移动应用开发与GIS方向的初中级开发者，帮助解决轨迹数据在地图上动态还原、交互控制与性能优化等实际问题。压缩包共67个文件，约3.59MB，包含21个png界面素材、13个class与3个java源码、9个jar依赖库、9个xml配置、3个so本地库及apk安装包等，覆盖从工程配置到可运行示例的完整结构。资源以经纬度集合为数据基础，演示轨迹绘制、动画回放、开始暂停继续等交互控制，并涉及分段加载、平滑插值等性能优化思路，同时兼顾兼容性测试与界面布局设计。已有361人学习下载，适合希望快速理解高德地图API轨迹回放实现路径、对照源码梳理工程组织方式的读者参考借鉴。

1. 高德历史轨迹回放：从一堆坐标点到能拖进度条的复盘工具

手里攒了一堆设备上报的经纬度，想在地图上把某辆车、某个人、某台设备的当天路线原样放一遍，还要能拖进度条、能看速度、能停在某个时间点查位置——这就是高德历史轨迹回放要解决的事。它本质上是把「带时间戳的坐标序列」翻译成「地图上一条会动的线」，核心依赖高德地图 JS API 的轨迹展示能力，配合你自己的后端把历史点位查出来喂进去。适合做车队管理、外勤打卡复盘、设备巡检回看、物流时效核查的开发者。新手照着能跑通，熟手更该关注的是点位抽稀、时间对齐和大量点下的卡顿边界。下面按「数据怎么备、地图怎么画、坑在哪」一路拆下去。

2. 轨迹数据准备：坐标、时间戳与抽稀策略

回放能不能顺，七成取决于喂进去的数据长什么样。高德地图用的是 GCJ-02 坐标系，而很多设备（尤其是 GPS 模块、部分海外模组）吐出来的是 WGS-84，两者直接混用会出现几十到上百米的偏移，回放时车「飘」到马路对面就是这么来的。所以第一步不是写地图代码，而是把数据规整成统一坐标系、统一时间格式、按时间排好序的数组。

2.1 坐标纠偏与时间戳归一

常见做法是后端在入库前就做一次 WGS-84 转 GCJ-02，别等到前端渲染再转，否则每次回放都要算一遍。转换算法网上有成熟实现，核心是一组基于椭球参数的偏移公式。时间戳统一成毫秒级 Unix 时间，别混用「秒」和「毫秒」，这是后面进度条对不上的头号原因。

// WGS-84 转 GCJ-02，入库前调用一次即可 const PI = 3.1415926535897932384626; const A = 6378245.0; // 长半轴 const EE = 0.00669342162296594323; // 偏心率平方 function outOfChina(lng, lat) { // 粗略判断是否在国内范围，国外坐标不做偏移 return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); } function transformLat(lng, lat) { let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; return ret; } function transformLng(lng, lat) { let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; return ret; } function wgs84ToGcj02(lng, lat) { if (outOfChina(lng, lat)) return [lng, lat]; let dLat = transformLat(lng - 105.0, lat - 35.0); let dLng = transformLng(lng - 105.0, lat - 35.0); const radLat = lat / 180.0 * PI; let magic = Math.sin(radLat); magic = 1 - EE * magic * magic; const sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((A * (1 - EE)) / (magic * sqrtMagic) * PI); dLng = (dLng * 180.0) / (A / sqrtMagic * Math.cos(radLat) * PI); return [lng + dLng, lat + dLat]; }

这段代码里outOfChina是个粗略边界判断，国内坐标才做偏移，避免把境外点位算歪。transformLat和transformLng是偏移量的多项式拟合，EE是椭球偏心率平方，这几个常数别随手改。转换后得到的是[lng, lat]顺序，注意高德 API 里LngLat也是经度在前，别写反。

2.2 点位抽稀：别把一万个点直接怼给地图

设备如果 5 秒上报一次，一天就是一万七千多个点。全量画线，浏览器直接卡成幻灯片。抽稀不是简单隔几个点取一个，那样会把转弯抹掉。常见做法是 Douglas-Peucker 算法按垂直距离阈值抽稀，或者按「距离 + 时间」双阈值：相邻两点距离小于 10 米且时间差小于 30 秒就合并。抽稀只影响「画线」，原始点仍要保留，因为点击查询、速度计算还得用全量数据。

// 按距离阈值抽稀，保留首尾点 function thinByDistance(points, minDistMeter = 10) { if (points.length <= 2) return points; const result = [points[0]]; for (let i = 1; i < points.length - 1; i++) { const prev = result[result.length - 1]; const d = haversine(prev.lng, prev.lat, points[i].lng, points[i].lat); if (d >= minDistMeter) result.push(points[i]); } result.push(points[points.length - 1]); // 尾点必留 return result; } // 两点球面距离，单位米 function haversine(lng1, lat1, lng2, lat2) { const R = 6371000; const rad = Math.PI / 180; const dLat = (lat2 - lat1) * rad; const dLng = (lng2 - lng1) * rad; const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.sqrt(a)); }

minDistMeter是抽稀阈值，城市道路场景 10 米够用，高速场景可以放到 30 米。haversine用球面距离而不是平面距离，跨纬度时更准。抽稀后点数通常能压到原来的三分之一到五分之一，画线流畅度提升明显。注意尾点必须保留，否则轨迹会「断头」。

3. 地图渲染与回放控制：把静态线变成会动的轨迹

数据备好了，接下来是把它画到高德地图上并让它动起来。高德 JS API 里画轨迹线用AMap.Polyline，回放时不断更新线的path或者用一个移动的AMap.Marker沿路径走。真正好用的回放不是「线一下子全出来」，而是「线随进度生长 + 车标跟着走 + 进度条可拖」。

3.1 初始化地图与轨迹线

先引入高德 JS API，创建地图实例，再把抽稀后的点转成AMap.LngLat数组。线的样式、颜色、粗细都在这里定。注意map容器要有明确高度，否则地图不显示，这是新手最常见的翻车点。

<!-- 页面里放一个容器，必须有高度 --> <div id="mapContainer" style="width:100%;height:600px;"></div> <script src="https://webapi.amap.com/maps?v=2.0&key=你的Key"></script> <script> const map = new AMap.Map('mapContainer', { zoom: 14, center: [116.397, 39.908] // 初始中心，回放开始后会被覆盖 }); // 假设 points 是抽稀后的 [{lng, lat, time}, ...] const path = points.map(p => new AMap.LngLat(p.lng, p.lat)); const polyline = new AMap.Polyline({ path: path, strokeColor: '#1e90ff', strokeWeight: 6, strokeOpacity: 0.85, lineJoin: 'round', showDir: true // 显示方向箭头 }); map.add(polyline); map.setFitView([polyline]); // 自动缩放到轨迹范围 </script>

showDir: true会在线上加方向箭头，复盘时一眼看出行驶方向。setFitView让地图自动缩放到整条轨迹，省得手动调。strokeWeight别设太大，超过 8 在小屏幕上会糊成一片。

3.2 进度条驱动回放：时间对齐是核心

回放的本质是「用一个 0 到 1 的进度值，去索引轨迹点」。进度条拖动时，根据进度算出当前应该显示到第几个点，然后更新线的path和车标位置。这里最容易踩的坑是「按点索引」而不是「按时间索引」——如果点位疏密不均，按点索引会导致进度条匀速但车忽快忽慢。正确做法是按时间戳插值。

let playing = false; let progress = 0; // 0 ~ 1 let rafId = null; const totalDuration = 30000; // 整段回放耗时 30 秒 const startTime = points[0].time; const endTime = points[points.length - 1].time; const timeSpan = endTime - startTime; const marker = new AMap.Marker({ position: path[0], icon: new AMap.Icon({ size: new AMap.Size(24, 24), image: 'car.png' }), offset: new AMap.Pixel(-12, -12) }); map.add(marker); // 根据进度找到当前应显示的点索引（按时间插值） function getIndexByProgress(p) { const targetTime = startTime + timeSpan * p; for (let i = 0; i < points.length - 1; i++) { if (points[i].time <= targetTime && points[i + 1].time >= targetTime) { return i; } } return points.length - 1; } function renderAt(p) { const idx = getIndexByProgress(p); const subPath = path.slice(0, idx + 1); polyline.setPath(subPath); marker.setPosition(path[idx]); // 同步进度条 UI document.getElementById('slider').value = p * 100; } function tick(ts) { if (!playing) return; const elapsed = ts - startTs; progress = Math.min(elapsed / totalDuration, 1); renderAt(progress); if (progress < 1) { rafId = requestAnimationFrame(tick); } else { playing = false; } } let startTs = 0; function play() { if (playing) return; playing = true; startTs = performance.now() - progress * totalDuration; rafId = requestAnimationFrame(tick); } function pause() { playing = false; cancelAnimationFrame(rafId); } // 进度条拖动 document.getElementById('slider').addEventListener('input', e => { pause(); progress = e.target.value / 100; renderAt(progress); }); </script>

getIndexByProgress是整段逻辑的心脏：它把 0~1 的进度映射成时间，再找到落在哪个时间区间，这样无论点位疏密，车标移动速度都和真实时间成比例。totalDuration控制回放快慢，30 秒放完一天也行，放完一小时也行，按业务调。requestAnimationFrame比setInterval更跟手，页面切到后台会自动降频，省性能。拖动进度条时先pause，避免动画和手动拖拽打架。

3.3 速度与停留点：从轨迹里读出业务信息

光看线还不够，复盘时经常要问「这段为什么停了 20 分钟」「这段速度是不是超了」。这些都能从原始点位算出来：相邻两点距离除以时间差就是速度，连续多个点距离接近零就是停留。把停留点用不同颜色的圆点标出来，超速段用红色线段，复盘效率立刻不一样。

// 计算每段速度，单位 km/h function calcSpeeds(points) { const speeds = []; for (let i = 1; i < points.length; i++) { const d = haversine(points[i-1].lng, points[i-1].lat, points[i].lng, points[i].lat); const dt = (points[i].time - points[i-1].time) / 1000; // 秒 speeds.push(dt > 0 ? (d / dt) * 3.6 : 0); } return speeds; } // 找出停留段：连续速度低于 1km/h 且持续超过 5 分钟 function findStops(points, speeds, minMinutes = 5) { const stops = []; let start = -1; for (let i = 0; i < speeds.length; i++) { if (speeds[i] < 1) { if (start === -1) start = i; } else { if (start !== -1) { const dur = (points[i].time - points[start].time) / 60000; if (dur >= minMinutes) stops.push({ start, end: i, duration: dur }); start = -1; } } } return stops; }

calcSpeeds返回的是每两个相邻点之间的平均速度，不是瞬时速度，点位越密越接近真实。findStops的minMinutes是停留判定阈值，低于这个时长的停车（比如等红灯）不算停留，避免误报。停留点在地图上用AMap.CircleMarker标出来，点一下弹出停留时长，这就是复盘工具和「只能看线」的差距。

4. 避坑与排查：回放做不顺时先查这几条

轨迹回放这东西，代码写对了不一定跑得顺，很多问题出在数据、坐标系和性能上。下面几条是我和同行踩过的真实坑，按「现象 → 原因 → 解决」列出来，遇到问题先对照排查。

4.1 轨迹整体偏移几十米

现象：回放时线整体偏离道路，明明设备就在路上，线却画到旁边小区里。原因：坐标系没统一，WGS-84 的点直接当 GCJ-02 用了。解决：入库前统一转 GCJ-02，转换函数见 2.1；如果数据源已经是 GCJ-02（比如从高德 SDK 直接拿的），就不要再转，转两次反而偏。

4.2 进度条拖到一半车标不动

现象：拖动进度条，线在变但车标卡在原地。原因：renderAt里只更新了polyline.setPath，忘了marker.setPosition，或者getIndexByProgress返回的索引越界。解决：确认renderAt里两个更新都写了；getIndexByProgress的循环边界用points.length - 1，别用points.length，否则最后一段取不到。

4.3 点位多了页面卡死

现象：超过五千个点后，拖动进度条明显掉帧，地图缩放也卡。原因：每次setPath都传全量数组，浏览器要重绘整条线。解决：抽稀后再画，见 2.2；或者用AMap.Polyline的setPath只传当前进度之前的点，别传全量。另外showDir在点特别多时也耗性能，可以关掉。

4.4 时间戳对不上，回放速度忽快忽慢

现象：进度条匀速拖，车却一会儿快一会儿慢。原因：按点索引而不是按时间索引，点位疏密不均时就会这样。解决：用 3.2 里的getIndexByProgress，按时间插值找索引。另外检查时间戳单位是否统一，秒和毫秒混用会让timeSpan算错。

4.5 地图容器不显示或高度塌陷

现象：页面加载后地图区域一片空白，或者只有一条细缝。原因：容器div没有设高度，或者被父元素overflow: hidden裁掉了。解决：给容器明确height，比如600px或100vh；检查父级有没有display: none导致初始化时尺寸为 0，这种情况要在地图显示后再调map.resize()。

5. 进阶技巧：用插值让回放丝滑，用分段让复盘精准

基础回放跑通后，真正拉开体验差距的是两个细节：一是车标在两点之间的「补间」，二是按业务时段分段回放。

先说补间。上面的renderAt是「跳到最近的点」，如果点位间隔 30 秒，车标就是每 30 秒跳一下，看着像瞬移。解决办法是在相邻两点之间做线性插值，根据当前时间算出精确的经纬度。这样即使原始点位很稀，车标也能平滑移动。

// 按时间在两点间线性插值，返回精确位置 function interpolate(points, targetTime) { for (let i = 0; i < points.length - 1; i++) { const t1 = points[i].time, t2 = points[i + 1].time; if (targetTime >= t1 && targetTime <= t2) { const ratio = (targetTime - t1) / (t2 - t1); return { lng: points[i].lng + (points[i + 1].lng - points[i].lng) * ratio, lat: points[i].lat + (points[i + 1].lat - points[i].lat) * ratio }; } } return points[points.length - 1]; }

interpolate的ratio是当前时间在两点时间区间里的占比，经纬度按这个比例线性过渡。注意这是线性插值，不走道路曲线，如果两点之间隔了一个弯，车标会「切弯」。要更真实就得用路径规划补点，但那是另一个量级的成本，多数复盘场景线性插值够用。

再说分段。一天的回放里，真正要细看的可能就早高峰那两小时。做法是在进度条下面加几个「时段按钮」，点了之后把startTime和endTime重设成该时段的起止，timeSpan跟着变，回放范围就缩到那一段。这样复盘时不用在整天的进度条上反复微调。

最后说个验证方法：拿一段已知的、带真实时间戳的轨迹，手动算出总里程和总耗时，再和回放里显示的对一遍。如果里程对不上，八成是抽稀把弯道抹了或者坐标系偏了；如果耗时对不上，查时间戳单位。我现在的习惯是，每接一个新数据源，先拿 100 个点跑一遍这个对账，确认无误再上全量。从那以后我每次接入新设备数据，都强制先跑一遍坐标转换和里程对账，省得后面回放出来全是玄学偏移。希望帮到你。

本文还有配套的精品资源，点击获取