H5地理位置信息、微信摇一摇

最新推荐文章于 2023-07-17 11:37:48 发布

weixin_30696427

最新推荐文章于 2023-07-17 11:37:48 发布

阅读量159

点赞数

原文链接：http://www.cnblogs.com/tianya-guoke/p/10306733.html

版权

geolocation

window.navigator.geolocation

1、getCurrentPosition() // 获取当前的位置信息

2、watchPosition() // 监视位置变化，和1参数一样

3、clearWatch() // 清除位置监视

1、getCurrentPosition(s, e, p)

success回调 (必须)

error回调

options参数

需要FQ

// 特别注意，chrome需要在连上vpn的时候才能获取到

var success = function (pos)

{

console.log(pos);

};

// 只传一个参数

window.navigator.geolocation.getCurrentPosition(success);

Geoposition对象

Geoposition对象属性

latitude 纬度

longitude 经度

altitude 海拔

accuracy 定位精准度，单位m

altitudeAccuracy 海拔精准度，单位m

heading 方向

speed 速度

https://dev.w3.org/geo/api/spec-source.html#coordinates_interface

PositionError对象

用户拒绝 code = 1

获取不到 code = 2

连接超时 code = 3

https://dev.w3.org/geo/api/spec-source.html#position_error_interface

配置参数

enableHighAccuracy 是否需要高精度位置默认false

timeout 单位ms 请求超时时间默认infinity

maximumAge 单位ms，watchPosition方法则不停地取用户的地理位置信息，不停地更新用户的位置信息。位置信息过期时间设置为0就无条件获取新的地理位置信息默认0

https://dev.w3.org/geo/api/spec-source.html#position_options_interface

watchPosition

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

参数与 getCurrentPosition 相同

clearWatch(id) 使用 clearWatch 清除监听

devicemotion监听加速度变化

window.addEventListener('devicemotion', function(event)

{ console.log(event); }

);

devicemotion事件所包含的属性

1.accelerationIncludingGravity （包括重心引力,z轴方向加了9.8,在x,y方向上的值两者相同）重力加速度

2.acceleration 重力加速度（需要陀螺仪支持）

3.rotationRate(alpha, beta, gamma)旋转速率

4.interval // 获取的时间间隔均为只读属性

微信摇一摇

</head>
    <div id = "demo"></div>
<body>
    <script>
       var speed = 25;
       var lastTime = 0;
       var lastX = 0; lastY = 0; lastZ = 0;
       window.addEventListener('devicemotion',function(event){
          console.log(event);
          demo.innerHTML = 'acceleration-x' + event.acceleration.x + '<br/>y:' + event.acceleration.y + '<br/>z:' + event.acceleration.z + '<br/>'
                           + 'accelerationIncludingGravity-x' + event.accelerationIncludingGravity.x + '<br/>y:' + event.accelerationIncludingGravity.y + '<br/>z:' + event.accelerationIncludingGravity.z
          var x = event.acceleration.x;
          var y = event.acceleration.y;
          var z = event.acceleration.z;
          var nowTime = new Date().getTime();
          if(nowTime - lastTime > 500){
             lastTime = nowTime;
              if(Math.abs(x - lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed){
                 alert('摇一摇');
                 lastX = x;
                 lastY = y;
                 lastZ = z;
              }
          }                  
       });
  </script>
</body>

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

window.addEventListener(‘deviceorientation’, function(event){

console.log(event);

});

deviceorientation事件所包含的属性

1.alpha 表示设备沿z轴上的旋转角度，范围为0~360。

2.beta 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。

3.gamma 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

      window.addEventListener('deviceorientation', function(e){
       demo.innerHTML = 'alpha :' + e.alpha + '<br/>'
                       + 'beta :' + e.beta + '<br/>'
                       + 'gamma :' + e.gamma + '<br/>'
      },false);