html5指南针实现

概念

地球坐标系

地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。

• X轴沿着地平面，垂直于Y轴，向东为正，向西为负。
• Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。
• Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。

设备坐标系

设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。

x轴沿着屏幕表面，向右为正，向左为负。
y轴沿着屏幕表面，向上为正，向下为负。
z轴垂直屏幕表面或键盘，远离屏幕的方向为正。

Alpha

围绕z轴旋转设备将使alpha角度值发生变化:

alpha为0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。

Beta

围绕x轴旋转，也就是前后旋转，将使beta值发生改变:

当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到180°，向后翻转递减到-180°。

Gamma

当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:

gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到90°，向左翻转时，递减到-90°。

 

指南针实现

要接收设备方向变化信息，你只需要注册监听deviceorientation事件：

window.addEventListener("deviceorientation", handleOrientation, true);

注册完事件监听处理函数后（对应这个例子中的handleOrientation），监听函数会定期地接收到最新的设备方向数据。

方向事件对象中包含四个值：

DeviceOrientationEvent.absolute（返回的是个bool值表示设备是否绝对支持方向定位）

DeviceOrientationEvent.alpha（0°为指北方向）

DeviceOrientationEvent.beta

DeviceOrientationEvent.gamma

if (window.DeviceOrientationEvent) {
  var timer = null, nowTime = +new Date();
  window.addEventListener("deviceorientation", function (event) {
    var alpha = null;
    if (event.webkitCompassHeading) {
      alpha = event.webkitCompassHeading;
    } else {
      alpha = event.alpha;
    }
    var selfDegress = 360 - alpha;
    if (+new Date() - nowTime > 1000) {
      nowTime = +new Date();
      var userPointer = document.getElementById("userPointer");
      if (userPointer) {
        userPointer.style.transform = "translateX(-50%) rotate(" + selfDegress + "deg)";
        userPointer.style.transformOrigin = "50% 100%";
      }
    }
  }, false)
}