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

Posted 2021-04-04 麻辣GIS

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

deviceorientation 事件

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和大家分享。

兼容性

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

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

扩展阅读  

                                                   

END

关注 麻辣GIS

627853279(QQ群三)
436386604(QQ群四)
606176554(QQ群五)
946178380(QQ群六)
861271808(QQ群七)

http://malagis.com