DeviceOrientation ---实现指南针

一、背景

活动测开发sns过程中,有些地图、定位等场景会用到指南针的功能,所以我们对HTML5 DeviceOrientation 重力感应接口简单介绍,来实现一个指南针。

二、接口说明

HTML5的DeviceOrientation API 可实时获取屏幕的旋转方向。当浏览器的Orientation发生变化时,触发DeviceOrientation事件,并返回一个DeviceOrientationEvent对象,属性列表如下:  
DeviceOrientationEvent: 封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。  
设备坐标系概念:x 轴方向是从左往右,y 轴方向是从下往上,z 轴方向是从后往前。(当设备静止放在水平桌面时,这三个值都是 0)

alpha  设备绕z轴旋转的角度。 (指南针的应用只要拿到alpha就OK啦)
beta   设备绕x轴旋转的角度
gamma  设备绕y轴旋转的角度

webkitCompassHeading: 与正北方向的角度差值。正北为0度,正东为90度,正南为180度,正西为270度。因为0度是正北,所以叫指北针,不是指南针。
webkitCompassAccuracy:指北针的精确度,表示偏差为正负多少度。一般是10。

三、 实现方式

//检查手机是否支持
 if(window.DeviceOrientationEvent){
    window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
}else{
    alert("您的浏览器不支持DeviceOrientation");
}
//事件处理逻辑
function DeviceOrientationHandler(event){
      document.getElementById("alpha").innerHTML = event.alpha;
      document.getElementById("beta").innerHTML = event.beta;
      document.getElementById("gamma").innerHTML = event.gamma;
      document.getElementById("heading").innerHTML = event.webkitCompassHeading;
      document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;
}

//简单的html示例
<html>
<head>
  <title>DeviceOrientationEventtitle>
  <meta charset="UTF-8" />
head>
<body>
  <p>左右:<span id="alpha">0span>p>
  <p>前后:<span id="beta">0span>p>
  <p>扭转:<span id="gamma">0span>p>
  <p>指北针指向:<span id="heading">0span>度p>
  <p>指北针精度:<span id="accuracy">0span>度p>
body>
html>

四、指北针实例DEMO

DEMO链接地址:http://wqs.jd.com/promote/201608/compass/index.html
Dev环境  引用页面片

设置初始位置x坐标: window.compassInitX = 200
设置初始位置y坐标:window.compassInitY = 50;
设置指南针大小: window.compassZoom= 0.5;

五、相关事件

DeviceMotionEvent事件封装了更多的属性,accelaration、accelarationIncludingGravity、rotationRate 引进重力速度角度等概念,可实现摇一摇等等功能。
参见boat 写的摇一摇组件: http://legos.wq.jd.com/legos4.php/package?pid=35&id=3098

你可能感兴趣的:(活动业务)