小程序开发日记⑧：订单轨迹与无人机位置
“查看位置”页面需要让用户看到起点、目的地、航线和无人机进度。它看起来比管理端地图简单，实际还多了小程序原生地图、坐标系和真机缩放等限制。
1. 航点兼容解析
后端航线可能是数组、JSON 字符串，也可能嵌套在 waylinePoints、routePoints 或 coordinates 中。页面先收集候选，再统一解析：
function normalizePointItem(item = {}) { const source = item.point || item.location || item.coordinate || item.position || item return normalizePoint( source, ['latitude', 'lat', 'waylineLatitude', 'pointLatitude', 'y'], ['longitude', 'lng', 'lon', 'waylineLongitude', 'pointLongitude', 'x'] )}只有有限数字组成的点才进入航线，避免一个空字符串让整条 polyline 消失。
2. WGS84 与 GCJ-02
飞行系统常使用 WGS84，小程序地图使用 GCJ-02。页面根据接口标记判断是否转换：
function normalizeMapRoutePoints(points, data) { return shouldConvertRouteToGcj02(data) ? points.map(wgs84ToGcj02) : points}坐标系不一致时，路线会整体偏移，常被误判为无人机图标锚点问题。排查地图偏移应先确认坐标系，再看图标样式。
3. marker 必须绑定地理坐标
起点、终点和无人机都通过地图 markers 属性创建：
function buildMarker(id, point, iconPath, width, height, options = {}) { return { id, latitude: point.latitude, longitude: point.longitude, iconPath, width, height, anchor: options.anchor || { x: 0.5, y: 1 } }}无人机图标需要根据素材透明区域调整 anchor。若使用普通 image 绝对定位在地图上，缩放后路线和图片分别处于地理坐标与屏幕像素两个体系，必然发生悬浮偏移。
4. 航线与飞行进度
页面使用各线段球面距离计算累计长度，再根据整体进度找到无人机位置：
function pointAtRoute(points, progress) { const distances = points.slice(1).map((p, i) => distanceBetween(points[i], p)) const target = distances.reduce((a, b) => a + b, 0) * progress // 找到 target 所在线段，再在线段内插值}飞行进度优先使用任务开始时间与持续时间计算；无有效任务时间时使用接口当前位置或稳定的展示进度。页面不能每次刷新都让无人机回到起点。
5. 自动适配视野
当航点不少于两个时调用 includePoints：
mapContext.includePoints({ points: routePoints, padding: [72, 48, 180, 48]})底部信息卡较高，所以底部 padding 大于其他方向，防止终点被卡片挡住。没有有效航线时才使用默认中心与缩放级别。
6. 动画与刷新
动画通过 requestAnimationFrame 或定时帧更新 marker 的坐标。下拉刷新重新读取任务后先停止旧动画，再应用新航线并重启动画。页面卸载时同样停止，避免后台继续计算。
onUnload(() => stopRouteAnimation())7. 当前定位不是无人机定位
页面的“定位到我”调用 moveToLocation，只移动地图视野到用户当前位置，不会修改无人机 marker。把用户定位与飞行位置分开命名，可以避免业务含义混淆。
8. 本篇小结
真机与开发者工具差异
原生 map 的 marker 锚点、图片清晰度和 includePoints 行为在开发者工具与真机上可能略有差异。因此素材使用合适的实际尺寸，不依赖超大透明画布；padding 预留安全区；图标问题优先检查素材边界和 anchor，而不是只看模拟器结果。
数据新鲜度
轨迹页显示“更新时间”，下拉刷新后重新获取任务。若长时间没有新位置，页面标注“位置更新延迟”，而不是继续播放无限逼真的动画。用户需要知道无人机大概在哪，也需要知道这个位置有多新。
路线接口为空时，只有起终点就绘制基础线；连起终点都不完整时展示明确空态。使用演示航线应仅限开发环境，正式页面不能用一条漂亮的假路线掩盖数据缺失。
地图放大后图标会不会飘，答案不在 top: -20px，而在坐标系、marker 和 anchor。修复这类问题让我学会先问一句：这个元素究竟属于地图，还是只是盖在地图上？问对了，偏移通常就解决了一半。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！