「GIS教程」使用HTML5获取设备的方向信息

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

deviceorientation 事件

DeviceOrientationEvent，它会在加速度传感器检测到设备在方向上产生变化时触发。

监听DeviceOrientationEvent，会传入一个函数，我们可以从函数参数中读取设备的方向信息。

返回结果解释

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

1. DeviceOrientationEvent.alpha
2. DeviceOrientationEvent.beta
3. DeviceOrientationEvent.gamma

Alpha范围是 0 - 360，0表示的是正北。

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

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

应用

其实这个的应用还是挺多的，比如指南针、摇一摇等。

兼容性

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