html5 怎么插指南针,HTML5指南针

deviceOrientation & deviceMotion

以上为HTML5的提供的两种接口

摇一摇功能(DeviceMotion)

重力感应方向控制/指南针(DeviceOrientation)

重力感应与罗盘 DeviceOrientation

当浏览器的Orientation发生变化时，触发DeviceOrientation事件，并返回一个DeviceOrientationEvent对象，属性如下：

alpha：设备的指示方向，根据指南针的设定情况而定

beta：设备围绕X轴旋转的角度

gama：设备围绕Y轴旋转的角度

工作原理

根据event对象的三个方向的参数来确定设备的旋转角度：

alpha的取值范围是0-360，一般来说，设备指向正北方向时为0。

beta值为设备绕x轴旋转的角度，取值范围为-180-180。

gamma取值范围-90-90.

当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。

档屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。

实现指南针demo

首先为浏览器绑定deviceorientation事件和处理程序

//add deviceorientation event listener

if(window.DeviceOrientationEvent){//返回一个DeviceOrientationEvent对象

window.addEventListener('deviceorientation',DeviceOrientationHandler,false);///添加监听事件

}else{

alert("您的浏览器不支持DeviceOrientation");

}

function DeviceOrientationHandler(event) {

alpha = event.alpha; //Z轴方向

var beta = event.beta,//X轴方向

gamma = event.gamma;//Y轴方向

if (alpha != null) {

arrow.style.webkitTransform = "rotate(" + alpha + "deg)";//箭头旋转

}

}