微信小程序map画轨迹需严格遵循polyline格式规范：必须用8位hex色值、{latitude,longitude}对象数组、数字width、外层包裹数组；超300点须抽稀或分段；坐标系须转gcj-02；动态绘制优先用drawpolyline。

微信小程序里用 map 组件画运动轨迹，核心就一条：别直接往 polyline 里 push 点，否则 Android 上大概率闪、iOS 可能卡、点一多直接白屏。

polyline 数据格式必须严格达标，错一个字段就全黑

微信原生 map 对 polyline 是强校验，不是 Vue 响应式那种“差不多就行”。常见挂掉的写法：

• 传了 color: "blue" 或 color: "rgb(255,0,0)" —— 必须是 8 位 hex，比如 #FF000080（后两位是 alpha）
• points 里写成 [116.4, 39.9] 或 {lat: 39.9, lng: 116.4} —— 必须是 {latitude: 39.9, longitude: 116.4} 对象数组
• 漏掉 width 字段，或写成字符串 "8" —— 必须是数字，比如 width: 6
• 整个 polyline 不是数组，而是单个对象 —— 微信只认 Array，哪怕只画一条线也要包一层 []

轨迹点超 300 就得抽稀或分段，别硬扛

实测微信 map 渲染上限在 800–1000 点之间。跑步一小时原始 GPS 点轻松破 3000，全量传进去不是卡就是丢点。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 用 fast-douglas-peucker npm 包做抽稀，阈值设 3～5 米，压缩率 60%+，肉眼几乎看不出断点
• 抽完还剩太多？拆成多条 polyline，每条控制在 200～300 点，靠 zIndex 控制绘制顺序（避免后画的盖住前画的）
• 别在 onReady 后立刻 setData 大量数据，加个 setTimeout(() => this.setData(...), 100) 让地图先初始化好

动态追加轨迹时，Android 会闪烁，得绕开 setData 全量更新

直接 this.polyline.push(newLine) 再 setData，Android 端会清空重绘整条线，视觉上就是“闪一下”。这不是你代码写错了，是 UniApp 底层机制决定的。

• 真要实时画线，优先用 mapContext.drawPolyline（需 uni-app 3.9.11+，且仅限微信小程序平台）
• 兼容老版本？改用“覆盖物叠加”思路：把长轨迹拆成小段，每次只 setData 新增的那一段，旧段不动
• 别监听 bindregionchange 频繁重算 width，加节流（比如 300ms 内只触发一次），否则地图一动就疯狂重绘

坐标系不统一，线会偏到隔壁省

uni.getLocation 默认返回的是 WGS-84 坐标，但微信小程序 map 使用 GCJ-02 坐标系。不转就画歪，而且越往北/西偏得越离谱。

• 用 transformFromWgs84（高德 SDK）或 qqmap-wx-jssdk 的 gcj02towgs84 反向转换（注意方向别搞反）
• 如果用腾讯地图 SDK，它内部已处理，但你要确认 map 组件没混用高德/腾讯的坐标逻辑
• 别信“看起来差不多”，跑一次北京五环就能验证：偏差 >500 米基本就是坐标系错了

最常被忽略的其实是抽稀后的点序和 zIndex 配合——画多段线时，如果新段 zIndex 比旧段低，高速移动时会出现“后画的线被前面盖住”的倒带感。这个细节调试起来特别费时间，建议一开始就固定好索引规则。