用历史点画路线

进阶 · 完整可运行示例

把最近 30 秒有效经纬度转换为地图路径，并保留缺测断点。

iOS 原生截图

完整源码

下载可导入 ZIP · 下载 JSX 源码

复制代码到新建仪表，或在 App 内导入 ZIP。

function main() {
  const path=$data.history.map(p=>p.latitude===null||p.longitude===null
    ? null:{latitude:p.latitude,longitude:p.longitude});
  const valid=path.filter(p=>p!==null).length;
  return <CardContent title="最近 30 秒路线" trailing={valid+' 点'}
    fulled={true} headerBlurColor="clear">
    <Map width="fill" height="fill" followMode={MapFollowMode.latestData}
      path={path} pathStyle={MapPathStyle.arrow}
      pathWidth={4} pathColor={$env.accent}
      pathOutlineWidth={1} pathOutlineColor={$env.dark?'#18201C':'#FFFFFF'}/>
  </CardContent>;
}

可以先改这些地方

位置	作用	修改建议
pathStyle	普通线或带方向路线	arrow 显示方向语义
pathWidth / pathOutlineWidth	主线与轮廓宽度	单位为屏幕逻辑点

在 App 中检查

1. 空历史仍能显示地图。
2. GPS 缺失段不应被连接成一条连续路线。

这个示例的边界

这是短窗口路线，不是完整行程回顾。Map 会处理显示坐标转换，不要在源码里重复转换坐标。

相关参考

历史窗口 · 地图路线