html5调用watchposition持续获取wgs84坐标，经百度api转换为bd09后，通过bmapgl.polyline动态绘制轨迹线，并配合抽稀、去重、后台暂停等优化实现运动追踪。
调用 HTML5 Geolocation 接口获取用户实时位置，再将坐标转换为百度地图坐标系（BD09）并绘制运动轨迹，是实现运动追踪的核心流程。关键在于位置持续监听、坐标系正确转换、轨迹点动态叠加与性能优化。
1. 获取浏览器定位权限并持续监听位置
Geolocation API 通过 navigator.geolocation.watchPosition() 实现持续定位，比单次 getCurrentPosition() 更适合轨迹追踪：
- 需在 HTTPS 环境或 localhost 下运行（现代浏览器强制要求）
- 设置合理参数避免耗电和卡顿：
enableHighAccuracy: true（启用GPS）、timeout: 10000（超时）、maximumAge: 3000（允许缓存3秒内位置） - 错误回调必须处理：如用户拒绝授权、定位失败、超时等，建议提示用户手动开启定位或重试
2. 将 WGS84 坐标转为百度地图 BD09 坐标
HTML5 返回的是标准 WGS84 坐标（如 GPS 设备原始坐标），而百度地图 SDK 只认 BD09 坐标系。不能直接使用，必须转换：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐使用百度官方提供的 坐标转换服务（API）：调用
http://api.map.baidu.com/geoconv/v1/，传入 WGS84 经纬度数组，返回 BD09 - 注意配额限制：免费版每日 10 万次，且需申请 AK；批量转换建议一次最多 10 个点
- 不建议用 JS 离线算法硬转（精度差、百度未公开公式，第三方转换库误差常达 50–500 米）
3. 在百度地图上动态绘制轨迹线与标记
初始化百度地图后，用 BMapGL.Polyline 和 BMapGL.Marker 实现实时渲染：
- 创建空的 polyline 实例，每次新增点后调用
setPath()更新路径（避免反复销毁重建） - 轨迹点过多时启用“抽稀”：例如只保留距离前一点 > 5 米的新点，减少渲染压力
- 可添加起点/终点图标、速度标签、时间戳气泡（用
BMapGL.Label或自定义覆盖物） - 调用
map.centerAndZoom(point, zoom)自动跟随最新位置（可选）
4. 注意事项与实用建议
真实场景中容易忽略但影响体验的关键点：
- 移动端需监听
visibilitychange事件：页面切到后台时暂停 watchPosition，唤醒后再恢复，避免无效耗电 - 连续定位下，部分安卓手机可能返回重复坐标（尤其弱信号时），建议对经纬度做简单去重（如 Δlat + Δlng
- 轨迹存储建议本地缓存（localStorage 或 IndexedDB），网络异常时暂存，恢复后补传服务器
- 百度地图 v3.0 GL 版本（BMapGL）已取代旧版，务必引入
https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK&type=webgl
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
