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,fa