关注前端开发微信微信号web007007

HTML5 Geolocation API实例

作者 管理员 发布时间 2012-07-05 13:24 文章分类 HTML5 文章评论 抢沙发 阅读次数

HTML5 Geolocation API的使用方法相当简单。请求一个位置信息,如果用户同意,浏览器就会返回信息,该信息是通过支持HTML5地理定位功能的底层设备提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成,有了这些位置信息就可以构建引人注目的位置感知类应用程序。

TML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法。

在使用之前,首先要检测浏览器是否支持Geolocation,使用下面的方法检测。


function loadDemo(){
if(navigator.geolocation){
document.getElementById(&quot;support&quot;).innerHTML = &quot;支持<a href="http://www.web92.net/tag/html5-2" title="查看 HTML5 中的全部文章" target="_blank">HTML5</a> Geolocation API&quot;;
} else {
document.getElementById(&quot;support&quot;).innerHTML = &quot;不支持 <a href="http://www.web92.net/tag/html5-2" title="查看 HTML5 中的全部文章" target="_blank">HTML5</a> Geolocation API&quot;;
}
};

getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:
1、successCallback:成功获取用户位置信息后的回调函数
2、errorCallback:获取用户位置信息失败时的回调函数
3、positionOptions:可选。获取用户位置信息的配置参数

i)、successCallback
successCallback 函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值:
1、accuracy:精确度
2、latitude:纬度
3、longitude:经度
4、altitude:海拔
5、altitudeAcuracy:海拔高度的精确度
6、heading:朝向
7、speed:

ii)、errorCallback

和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性:
1、message:错误信息
2、code:错误代码。
其中错误代码包括以下四个值:
0 — UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息
1 — PERMISSION_DENIED:表示用户拒绝浏览器获取位置信息的请求
2 — POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星
3 — TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

iii)、positionOptions
positionOptions 的数据格式为JSON,有三个可选的属性:
1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

watchPosition()

watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。

另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数(setTimeout/setInterval)那样,返回一个 ID ,可以被清除掉。这里是用接下来介绍的 clearWatch 清除。

clearWatch()

接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。

本文固定链接: http://www.web92.net/523.html | WEB前端开发

该日志由 于2012年07月05日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: HTML5 Geolocation API实例 | WEB前端开发
关键字: