vlambda博客
学习文章列表

最近在开发一个WebGIS项目，需要根据用户手机的方向信息来显示地图，这就需要我们使用JS通过浏览器可以获取到相关的系统硬件的信息。好有HTML5中已经有了规范，各浏览器厂商也有了相应实现，本文先做一个理论上的梳理。后面会根据实例写一个demo。

DeviceOrientationEvent，它会在加速度传感器检测到设备在方向上产生变化时触发。如果监听DeviceOrientationEvent，会传入一个函数，然后我们就可以从函数参数中读取设备的方向信息了。

PS：IOS 12 + 之后需要用户授权，Android还没有测试，后面会补充。

如果能正确访问设备，返回结果包含下面的值

1. DeviceOrientationEvent.alpha

2. DeviceOrientationEvent.beta

3. DeviceOrientationEvent.gamma

Alpha范围是 0 - 360，0表示的是正北。如下图：

Beta 范围是 -180 - 180，0表示水平。

Gamma 范围是 -90 - 90，0表示水平。

其实这个的应用还是挺多的，比如指南针、摇一摇等。后续会实现一个指南针的demo和大家分享。

主要针对移动端，兼容性如下：

综合来看，做项目的话还是可以的。