运动和地理位置API
2016-03-06 17:46
423 查看
本篇学习DeviceMotionEvent,DeviceOrientationEvent和Geolocation三个API,目前各浏览器对这三个API的支持还算可以。
![](https://gw.alicdn.com/tps/TB1pt9bLFXXXXcpXXXXXXXXXXXX-1259-465.png)
![](https://gw.alicdn.com/tps/TB1W04_LFXXXXXUXpXXXXXXXXXX-1258-416.png)
absolute为true时,instanceOfDeviceOrientationEvent提供的事设备坐标系和地球坐标系(以重力方向和磁场北方向坐参考)的差值。
![](https://gw.alicdn.com/tps/TB1S_xvLFXXXXaeapXXXXXXXXXX-434-370.png)
![](https://gw.alicdn.com/tps/TB1CsNLLFXXXXb0XVXXXXXXXXXX-415-366.png)
![](https://gw.alicdn.com/tps/TB1ie0JLFXXXXbBXVXXXXXXXXXX-501-395.png)
和Alpha类似webkitCompassHeading。据此,做了一个电子罗盘
传入成功和失败回调以及PositionOptions。
* 其中PositionOptions包含enableHighAccuracy,timeout,maximumAge三个属性:
* enableHighAccuracy,默认为false,为true时,会提供更高的精度,缺点是耗电以及反应相对较慢。
* timeout,响应的最大时间间隔,默认为无穷大,也就是说不会返回值直到position可用。
* maximumAge,位置缓存的最大时间,默认为0,设置为0时,设备不可以用缓存地址。设置为无穷大时,设备只用缓存地址。
* 失败回调(PositionError.code) 。
* 1,PERMISSION_DENIED,无操作权限。
* 2,POSITION_UNAVAILABLE,至少一个源位置返回内部错误。
* 3,TIMEOUT,响应超时。
![](https://gw.alicdn.com/tps/TB1pt9bLFXXXXcpXXXXXXXXXXXX-1259-465.png)
![](https://gw.alicdn.com/tps/TB1W04_LFXXXXXUXpXXXXXXXXXX-1258-416.png)
DeviceMotionEvent
DeviceMotionEvent,顾名思义,是监听设备运动事件。运动主要包括x,y,z轴的加速度,包含重力加速的加速度,以及角加速度。特性
加速度
acceleration,加速度反悔的事设备在x,y,z方向的加速度。var acceleration = instanceOfDeviceMotionEvent.acceleration;
包含重力加速度的加速度
accelerationIncludingGravity,和acceleration不同的是,这个加速度包含重力加速度。var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
角加速度
rotationRate,记录的是设备在x,y,z三个轴每秒旋转的角度。var rates = instanceOfDeviceMotionEvent.rotationRate;
运动事件粒度
interval,返回时间间隔的毫秒数,可以用这个参数去决定运动事件的粒度。var interval = instanceOfDeviceMotionEvent.interval;
例子
这个例子主要记录设备的运动状态。DeviceOrientationEvent
特性
absolute
var absolute = instanceOfDeviceOrientationEvent.absolute;
absolute为true时,instanceOfDeviceOrientationEvent提供的事设备坐标系和地球坐标系(以重力方向和磁场北方向坐参考)的差值。
Alpha
围绕z轴旋转设备将使alpha角度值发生变化,alpha为0°时表示设备的顶部正指北极方向,当设备向左旋转时,alpha将增加。var alpha = instanceOfDeviceOrientationEvent.alpha;
![](https://gw.alicdn.com/tps/TB1S_xvLFXXXXaeapXXXXXXXXXX-434-370.png)
Beta
围绕x轴旋转,也就是前后旋转,将使beta值发生改变,当beta为0° 时表示设备顶部和底部与地表面的距离是一样的,当设备向前翻转时,beta递增到180°,向后翻转递减到-180°。var beta = instanceOfDeviceOrientationEvent.beta;
![](https://gw.alicdn.com/tps/TB1CsNLLFXXXXb0XVXXXXXXXXXX-415-366.png)
Gamma
当围绕y轴旋转,也就是左右倾斜设备时,将使gamma值发生改变,gamma等于0°表示设备左右两边与地表面的距离相等,当设备向右翻转时,gamma递增到90° ,向左翻转时,递减到-90°。var gamma = orientationEvent.gamma;
![](https://gw.alicdn.com/tps/TB1ie0JLFXXXXbBXVXXXXXXXXXX-501-395.png)
例子
这个例子主要记录设备的旋转角度。和Alpha类似webkitCompassHeading。据此,做了一个电子罗盘
Geolocation
方法
getCurrentPosition
Geolocation.getCurrentPosition()获得的是设备的当前位置:navigator.geolocation.getCurrentPosition(success[, error[, options]])
var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; console.log('Your current position is:'); console.log('Latitude : ' + crd.latitude); console.log('Longitude: ' + crd.longitude); console.log('More or less ' + crd.accuracy + ' meters.'); }; function error(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }; navigator.geolocation.getCurrentPosition(success, error, options);
传入成功和失败回调以及PositionOptions。
* 其中PositionOptions包含enableHighAccuracy,timeout,maximumAge三个属性:
* enableHighAccuracy,默认为false,为true时,会提供更高的精度,缺点是耗电以及反应相对较慢。
* timeout,响应的最大时间间隔,默认为无穷大,也就是说不会返回值直到position可用。
* maximumAge,位置缓存的最大时间,默认为0,设置为0时,设备不可以用缓存地址。设置为无穷大时,设备只用缓存地址。
* 失败回调(PositionError.code) 。
* 1,PERMISSION_DENIED,无操作权限。
* 2,POSITION_UNAVAILABLE,至少一个源位置返回内部错误。
* 3,TIMEOUT,响应超时。
watchPosition
注册一个事件,当设备的位置改变是调用。返回值是一个 watch ID,注销事件时使用。id = navigator.geolocation.watchPosition(success[, error[, options]])
clearWatch
注销监听事件:navigator.geolocation.clearWatch(id);
列子
基于Geolocation和Google Map API 实现简单的导航功能.相关文章推荐
- ZOJ 3605 2012浙江省省赛
- 在linux上安装Drupal
- Zabbix服务端以及客户端的安装
- 历届试题 兰顿蚂蚁
- 当你输入一个网址的时候,实际会发生什么?
- springmvc4+hibernate4分页查询功能
- JSONArray的学习理解
- 学习笔记2
- Javascript--String类型
- WebSocket
- Software Project Management hw1
- JSON的学习理解
- Java:按值传递还是按引用传递详细解说
- 链表问题
- cocos2dx 编写shader 遇到 溢出问题
- 请求网络中GET和POST的学习理解
- HDU 1043 Eight BFS
- 蓝桥杯历届-密码发生器
- Page 16 Exercises 1.2.3 -------Introduction to Software Testing (Paul Ammann and Jeff Offutt)
- Android中的context的学习理解