获取位置geolocation 加速度devicemotion 角度deviceorientation_deviceorientation webkitcompassheading-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45681557/article/details/102620810

这篇博客介绍了HTML5中获取地理位置`geolocation`的方法，包括`getCurrentPosition`和`watchPosition`，以及如何处理位置信息。同时，还讲解了`devicemotion`事件用于获取设备加速度和旋转速率的详细信息，包括`accelerationIncludingGravity`、`rotationRate`等属性。此外，提到了设备的`deviceorientation`事件，用于获取设备的旋转角度，如`alpha`、`beta`和`gamma`，以及`webkitCompassHeading`和`webkitCompassAccuracy`用于指南针方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取位置geolocation

在对象navigator下
window.navigator.geolocation；

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

1、getCurrentPosition(s, e, p)
success回调 (必须)
error回调
options参数
chrome需要翻墙

var success = function (pos) {
   
    console.log(pos);
};

// 只传一个参数
window.navigator.geolocation.getCurrentPosition(success);

对象属性
latitude 纬度
longitude 经度
altitude 海拔
accuracy 定位精准度，单位m
altitudeAccuracy 海拔精准度，单位m
heading 方向
speed 速度

PositionError对象
用户拒绝 code = 1
获取不到 code = 2
连接超时 code = 3

配置参数
属性和值
enableHighAccuracy 是否需要高精度位置默认false
timeout 单位ms 请求超时时间默认infinity
maximumAge 单位ms更新时限，位置信息过期时间设置为0就无条件获取新的地理位置信息默认0

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

clearWatch(id) 使用 clearWatch 清除监听

devicemotion获取加速度

window.addEventListener('devicemotion', function(e){
   
       console.log(e);
});

1.accelerationIncludingGravity （包括重心引力）重力加速度
2.acceleration 重力加速度
（需要陀螺仪支持）
3.rotationRate(alpha, beta, gamma:设备绕x,y,z轴旋转的角度)旋转速率
4.interval // 获取的时间间隔
均为只读属性

摇一摇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    
        var SHAKE_THRESHOLD = 800;//效率
        var last_update = 0;//时间差值
        var x, y, z, last_x=0, last_y=0, last_z=0;//加速度
        function deviceMotionHeadler(eventData) {
   
            var acceleration = eventData.accelerationIncludingGravity; //重力加速度
            var curTime = new Date().getTime();//取得时间锚点
            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 * 10000;
                if(speed > SHAKE_THRESHOLD