html5不支持原生magnetometer api，当前唯一兼容方案是deviceorientation api的alpha值（0–360°，正北为0°），需https、ios手势授权；须经低通滤波、磁偏角校正、动态校准及无效值兜底处理，并推荐canvas实现可视化。
HTML5本身不直接提供Magnetometer（磁力计）传感器的原生API。目前主流浏览器不支持通过标准Web API直接访问原始三轴地磁数据（如X/Y/Z磁场强度）——Magnetometer接口仍处于W3C工作草案阶段，尚未被Chrome、Safari或Firefox正式启用（截至2026年4月）。因此，网页端无法像嵌入式设备（如STM32+ST480MC）那样直接读取raw磁力计值并自行解算航向角。
实际可用的方向数据来源：DeviceOrientation API 的 alpha
当前唯一广泛兼容、可落地的方案是使用deviceorientation事件中的alpha值：
-
alpha代表设备绕Z轴（垂直轴）的偏航角，范围0–360°，0°对应正北（地理北），顺时针增加 - 该值已由系统底层融合了加速度计、陀螺仪和磁力计数据（Sensor Fusion），并非纯磁力计输出，但对用户而言就是“指南针方向”
- 支持条件严格：必须运行在HTTPS环境；iOS需用户手势触发后调用
DeviceOrientationEvent.requestPermission()；Android Chrome默认可用
提升精度的关键处理步骤
仅靠原始alpha值易受干扰，需叠加以下处理：
-
低通滤波平滑抖动：避免指针高频颤动，例如用指数加权移动平均：
filtered = filtered * 0.85 + raw * 0.15 -
磁偏角校正：用
Geolocation API获取当前位置经纬度，查WMM（世界磁模型）或在线服务（如NOAA）获取当地磁偏角δ，再做修正：trueNorthAngle = alpha - δ（注意单位与正负方向） - 动态校准入口：提供“校准”按钮，提示用户水平持机缓慢旋转360°，采集alpha极差并重置零点偏移，缓解软铁/硬铁干扰
-
无效值兜底：当
alpha === null、isNaN(alpha)或长时间无更新时，冻结指针并显示“未就绪”状态，不强行渲染错误角度
可视化实现建议
推荐使用<canvas></canvas>绘制，兼顾性能与控制精度：
- 表盘用
arc()画同心圆，叠加SVG刻度或Canvas文字标注N/E/S/W - 指针用
rotate()配合translate()锚定中心，避免CSS transform重排开销 - 添加微动动画：用
requestAnimationFrame驱动，比CSS transition更可控 - 支持深色模式：根据
prefers-color-scheme媒体查询切换表盘配色，提升户外可读性
为什么不能用纯Magnetometer？
即使未来浏览器启用Magnetometer接口，网页仍面临根本限制：
- 无权限访问设备级磁力计校准参数（如偏置、标度因子、正交误差），导致原始XYZ数据存在系统偏差
- 无法控制采样频率与传感器融合策略，无法规避手机金属边框、扬声器、无线充电线圈等本地干扰源
- 缺少物理层校准机制（如“画八字”动作识别），难以替代系统级传感器栈
所以现阶段所谓“高精度”，本质是把系统已优化好的alpha用好、滤好、校正好——不是绕过它，而是信任并增强它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
