HTML5 : 地理位置 \ 重力感应 \ 陀螺仪

地理位置

geolocation

window.navigator.geolocation
复制代码

1.getCurrentPosition()获取当前位置信息
2.watchPosition()监视位置变化，和1参数一样
3.clearWatch()清除位置监视

getCurrentPosition(success, error, options)

success 回调函数
errer 回调函数
options 参数

function suc(pos){
    console.log(pos);
}
function err(pos){
    console.log(pos)
}
var options = {
    enableHighAccuracy :true,
    timeout : 4000
}
window.navigator.geolocation.getCurrentPosition(suc, err, options)
复制代码

Geoposition 对象属性

latitude纬度
longitude经度
altitude海拔
accuracy定位精准度，单位 m
altitudeAccuracy 海拔精准度
heading 风向
speed 速度
复制代码

PositionError 对象

用户拒绝 code = 1
获取不到 code = 2
链接超时 code = 3
复制代码

配置参数

enableHighAccuracy是否需要高精度位置默认false
timeout单位ms请求超时时间默认infinity
maximumAge 单位ms，
watchPosition方法则不停地取用户的地理位置信息，不停的更新用户的位置信息。
位置信息过期时间设置为0就无条件获取新的地理位置信息默认0

watchPosition() / clearWatch()

var id = geolocation.watchPosition(fu) 用于注册监听器，在设备的地理位置发生改变的时候自动被调用(参数与getCurrentPosition相同)

clearWatch(id)使用clearWatch清除监听

重力感应

devicemotion 监听加速度变化

 window.addEventListener('devicemotion',function(event){
    console.log(event);
 });
复制代码

devicmotion 事件所包含的属性(只读属性)

1.accelerationIncludingGravity(包括重心引力，Z轴方向加了9.8，在X方向上的值两者相同)重力加速度
2.acceleration重力加速度（需要陀螺仪支持）
3.rotationRate(alpha, beta, gamma)旋转速率
4.interval 获取的时间间隔

window.addEventListener('devicemotion', function(e){
   item.innerHTML = e.accelerationIncludingGravity.x + '-' + e.accelerationIncludingGravity.y
}) 
复制代码

实战--摇一摇

var SHAKE_THRESHOLD = 8;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0,last_z = 0;
var num = 0;
function deviceMotionHeadler(eventData){
    //accelerationIncludingGravity(包括重心引力，Z轴方向加了9.8，在X方向上的值两者相同)重力加速度
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();
    //300ms后更新，提高性能
    if((curTime - last_update) > 300){
        var diffTime = curTime - last_update;
        last_update = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //判断为摇动，而不是手抖或其他的条件
        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 100;
        if(speed > SHAKE_THRESHOLD){
            alert('shaked~!');
            var div = document.createElement('div');
            num ++;
            div.innerText = num;
            document.body.appendChild(div);   
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
} 
window.addEventListener('devicemotion' , deviceMotionHeadler, false);  
window.addEventListener('devicemotion' , deviceMotionHeadler, false); 
复制代码

陀螺仪

deviceorientation 监听设备在方向上的变化

window.addEventListener(deviceorientation, function(evevt){
    console.log(event);
})
复制代码

deviceorientation 事件所包含的属性

1.alpha表示设备沿Z轴上的旋转角度，范围为 0 ～ 360.
2.beta表示设备在X轴上的旋转角度，范围为 -180～180.它描述的是设备由前向后旋转的情况。
3.gamma 表示设备在y轴上的旋转角度，范围为 -90～90.它描述的是设备由左向右旋转的情况。

4.webkitCompassHeading : 指北针，与正被方向的角度差值。正北为0度，正东为 90 度，正南为 180 度，正西为 270 度。
5.webkitCompassAccuracy : 指北针的精确度，表示偏差为正负多少度。一般是10.

function DeviceOrientationHandler(event){
    var oAlpha = document.getElementById('alpha'),
        oBeta = document.getElementById('beta'),
        oGamma = document.getElementById('gamma');

    var alpha = event.alpha,
        beta = event.beta,
        gamma = event.gamma,
        webkitCompassHeading = event.webkitCompassHeading;

     if(alpha != null || beta != null || gamma !=null){
         var html = '';
         if(gamma > 0){
             html = '向右倾斜' + gamma;
         }else{
             html = '向左倾斜' + gamma;
         }
         
         var str = '';
         if(beta > 0){
             str = '向前倾斜' + beta;
         }else{
             str = '向后倾斜' + beta;
         }
         
         var head = '';
         var headNum = Math.round(Math.round(webkitCompassHeading / 45));
         switch(headNum){
            case 0 :
                head = '东北';
                break
            case 1 :
                head = '东';
                break
            case 2 :
                head = '东南';
                break
            case 3 :
                head = '南';
                break
            case 4 :
                head = '西南';
                break
            case 5 :
                head = '西';
                break
            case 6 :
                head = '西北';
                break
            case 7 :
                head = '北';
         }
         head = head +  webkitCompassHeading;

         oAlpha.innerHTML = head;  
         oBeta.innerHTML = str;  
         oGamma.innerHTML = html;
     }else{
         alert('sorry')
     }     
}
if(window.DeviceOrientationEvent){
    window.addEventListener('deviceorientation', DeviceOrientationHandler,true)
}else{
     alert('不支持DeviceOrientation')
}

作者：柒号
链接：https://juejin.im/post/5afd3540f265da0ba267337f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

HTML5 : 地理位置 \ 重力感应 \ 陀螺仪

猜你喜欢