麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

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

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

deviceorientation 事件

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

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

返回结果解释

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

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

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

Alpha

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

Beta

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

Gamma

应用

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

兼容性

主要针对移动端,兼容性如下:

DeviceOrientationEvent兼容

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到QQ群中提问。

本站QQ群(一):291616564 加入QQ群

本站QQ群(二):166408035 加入QQ群

本站QQ群(三):627853279 加入QQ群

本站QQ群(四):436386604 加入QQ群

本站QQ群(五):606176554 加入QQ群

本站QQ群(六):946178380 加入QQ群

本站QQ群(七):861271808 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论