Geolocation API的基本知识
在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在三个方法。
取得当前地理位置
可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下:
void getCurrentPosition(onSuccess, onError, options);
其中第一个参数为获取当前地理位置信息成功时所执行的回调函数,第二个参数为获取当前地理位置信息失败时所执行的回调函数,第三个参数为一些可选属性的列表。其中,后两个参数是可选的。
该方法成功取得地理位置信息时执行的回调函数使用方法如下:
navigator.geolocation.getCurrentPosition(function(position) { // 获取成功时的处理。 });
如果获取地理位置信息失败,可以通过该方法的第二个参数定义的回调函数把错误信息提示给用户。当在浏览器中打开使用了Geolocation API来获得用户当前位置信息的页面时,浏览器会询问用户是否共享位置信息,如果拒绝共享的话也会引起错误。该回调函数使用一个error对象作为参数,该对象具有两个属性:code属性、message属性。
code属性的可能值有:用户拒绝了位置服务(属性值“1”)、获取不到位置信息(属性值“2”)、获取信息超时(属性值“3”)。
message属性为一个字符串,在该字符串中包含了错误信息,这个错误信息在开发和调试时很有用。有些浏览器不支持该属性。
错误处理回调函数的使用方法如下:
navigator.geolocation.getCurrentPosition(function(position) {}, function(error) { var errorType = ['位置服务被拒绝', '获取不到位置信息', '获取信息超时']; alert(errorType[error.code - 1]); });
该方法第三个参数为可选属性列表,这些可选属性包括:
- enableHighAccuracy:是否要求高精度的地理位置信息,这个参数在很多设备上设置了都没用,因为使用在设置上时需要结合设备电量、具体地理情况来综合考虑。因此,多数情况下把该属性高为默认,由设备自身来调整。
- timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒)。如果在该时间内未获取到地理位置信息,则返回错误。
- maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)。超过这个时间后缓存的地理位置信息被废弃,尝试重新获取地理位置信息。如果该值设置为“0”,则无条件重新获取新的地理位置信息。
该属性使用方法如下所示:
navigator.geolocation.getCurrentPosition(function(position) {}, function(error) {}, // 以下为可选属性。 { maximumAge: 60 * 1000 * 2, // 设置缓存有效时间为2分钟。 timeout: 5000 });
持续监视当前地理位置信息
使用watchPosition()方法来持续获取用户的当前地理位置信息,它会定期地自动获取,该方法定义如下:
int watchCurrentPosition(onSuccess, onError, options);
该方法三个参数的说明与使用方法与getCurrentPosition()方法相同。该方法返回一个数字,该数字的使用方法与JavaScript脚本中的setInterval()方法的返回结果类似,可以被clearWatch()方法使用,停止对当前地理位置信息的监视。
停止获取当前用户的地理位置信息
使用该方法可以停止对当前用户的地理位置信息的监视。该方法定义如下:
void clearWatch(watchId);
该方法的参数为调用watchCurrentPosition()方法监视地理位置信息时的返回参数。
position对象
如果获取地理位置信息成功,则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。position对象具有如下属性:
- latitude:当前地理位置的纬度。
- longitude:当前地理位置的经度。
- altitude:当前地理位置的海拔高度(不能获取时为null)。
- accuracy:获取到的纬度或经度的的精度(以米为单位)。
- altitudeAccurancy:获取到的海拔高度的精度(以米为单位)。
- heading:设备的前进方向。用面朝正北方向的顺时针旋转角度来表示(不能获取时为null)。
- speed:设备的前进速度(以米/秒为单位,不能获取时为null)。
- timestamp:获取地理位置信息的时间。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1673绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1051UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1286绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1672选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1379使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1457canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1462CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4607基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4053基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1974基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1817applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1517离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2553本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1563Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1213video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1717音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 896video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4932在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4966在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
html5获取当前地理位置
主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下
主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。
1、location.html 在浏览器中打开页面,即可获取您当前的ip地址,和所在城市,以及城市地理位置编码。(以国家统计局为准) 2、Location.java 运行代码,即可 获取 location.html 中的信息。 放在web项目中,可获取...
地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,浏览器从设别查询相关信息。 4、浏览器将相关信息发送到...
利用Html5的新特性geolocation可以获取用户的地理位置定位信息,并借助百度活google的地图api将所获取的地理位置信息展示在地图上。 做这个实验时必须保证测试的页面部署在HTTP服务器上,否则如果直接浏览器从本地...
复制代码代码如下: /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { //若支持地理位置获取,成功调用showPosition(),失败调用show...
有关HTML5地理位置的学习,通过这个ppt,你可以很快的了解到html5最新的一些知识,地图,定位等都能够在这个里面学习到。
一个google map小应用 应用google map api可以获得点的经纬度并且可以根据地理位置名称定位。
百度地图获取方圆地理位置
一个Html静态页面查IP地理位置,ajax~~~~~~~~~
1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法: navigator.geolocation.getCurrentPosition(success, error, options) 参数: success: 成功得到位置信息时的回调函数,使用...
本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置信息。 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理...
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息
获取用户地理位置</title> [removed][removed] </head> <body> </body> </html> [removed] $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?for
1.HTML5获取当前地理位置 HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API [removed] if(navigator.geolocation...
主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下