如果你是在特意寻找有关HTML5 Geolocation文章,那相信你应该对此有所了解,可能你不太清楚HTML5 Geoloation API的使用或者你想找一个有关HTML5 Geolocation的Demo。我相信你和我一样是一个爱学习的前端工程师,爱关注web前沿技术。下面就让我们一起来看看HTML5 Geoloatio的使用。
对于HTML5 Geoloatio的介绍我在此不多说,你可以Google一下。假如你想了解地理定位想关的信息,你也可以利用Google获取这些知识,本文主要讲HTML5 Geoloatio API的使用。
我们首先来看一下HTML5 Geolocation在主流浏览器中的支持情况,目前HTML5 Geolocation在以下浏览器和操作系统中已被支持:
1\带有Gears的Chrome;
2\Firefox3.5+
3\Opera10.0+
4\Safari4.0+
5\iOS3.0+
6 \Android2.0+
有些不支持的HTML5 Geolocation的浏览器(如Internet Explorer),可以通过安装Gears插件的形式获取用户Geolocation。
我们再来看看HTML5 Geolocation隐私
HTML5 Geolocation规范提供了一套保护用户隐私的机制,阻碍浏览器得到用户的明确许可,否则浏览不可获取用户的当前地理位置数据。
用户访问使用HTML5 Geolocation的站点,会触发隐私保护机制,如下图在iPhone中的Safari触发HTML5 Geolocation隐私保护机制。
考虑到用户的隐私,我们建议在使用HTML5 Geolocation时,一定要告知用户:
1\会收集用户的地理位置数据
2\为何收集用户的地理位置数据
3\位置数据保存的时间
4\用户如何更新他的位置数据
5\如何使用用户的地理位置数据
在开始使用HTML5 Geolocation API前,我们必须要检查浏览器是否支持HTML5 Geolocation
if (navigator.geolocation) {
//do something
}else{
alert(‘Sorry,your device not support geolocation!’);
}
继续探讨HTML5 Geolocation API。浏览器支持HTML5 Geolocation,我们如何获取用户的当前地理位置信息?
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,positionOptions);
navigator.geolocation对象有一个方法getCurrentPosition用来获取用户当前位置信息,该方法带有三个参数:
1\successCallback:成功获取用户位置信息后的回调函数
2\errorCallback:获取用户位置信息失败时的回调函数
3\positionOptions:可选。获取用户位置信息的配置参数
我们先来看看successCallback:
var success = function(position){
var lat = position.coords.latitude,
lon = position.coords.longitude,
info = document.getElementById(‘renderData’);
console.log(position);
if (lat) {
info.innerHTML = ”;
info.innerHTML += ‘<h3>From your geolocation:</h3>’ +
‘<ul><li><strong>Latitude:</strong>’ +
lat +
‘</li><li><strong>Longitude:</strong>’ +
lon +
‘</li><li><strong>Region Name:</strong>’ +
geoip_region_name() +
‘</li><li><strong>City:</strong>’ +
geoip_city() +
‘</li>’ +
‘<li><strong>Country:</strong>’ +
geoip_country_name() +
‘</li>’ +
‘<li><strong>Country Code:</strong>’ +
geoip_country_code() +
‘</li>’ +
(window.JSON || JSON && JSON.stringify ? ‘<li>’ + JSON.stringify(position) + ‘</li>’ : ”) +
‘</ul>’;
}
};
successCallback非常简单,它带有一个参数,表示已经获取到的用户位置数据(positionData),对象字面量格式。该对象包含两个属性coords\timestamp,
coords属性中包含了以下7个值:
1\accuracy:准确度
2\latitude:纬度
3\longitude:经度
4\altitude:海拔高度
5\altitudeAcuracy:海拔高度的精确度
6\heading:行进方向
7\speed:地面的速度
以上七个属性,如果浏览器没有获取到它们的值,则返回null。\
timestamp属性在实际开发中用处不大。
我们再看errorCallback:
var error = function(error){
var info = document.getElementById(‘renderData’);
info.innerHTML = ”;
info.innerHTML = info.innerHTML += ‘<h3>Error log:</h3>’ +
‘<ul><li><strong>Error Code:</strong>’ +
error.code +
‘</li><li><strong>Error Message:</strong>’ +
error.message +
‘</li></ul>’;
}
rrorCallback和successCallback一样的简单。errorCallback也带有一个参数,表示HTML5 Geolocation返回的错误数据,对象字面量格式,它包含以下两个属性message\code
1\message:错误信息
2\code:错误代码。
错误代码:
0(UNKNOW_ERROR)表示不包括在其它错误代码中的错误,这里可以需要在message中查找错误信息;
1(PERMISSION_DENIED)表示用户拒绝浏览器获取位置信息的请求
2(POSITION_UNAVALIABLE)表示获取位置信息失败
3(TIMEOUT)表示获取位置信息超是。必须在options中指定了timeout值时才有可能发生这种错误
某些浏览器可能没有message属性的值,则返回null。
最后我们看看可选参数positionOptions,positionOptions的数据格式为JSON。
positionOptions有三个可选的属性enableHighAcuracy\timeout\maximumAge
1\enableHighAcuracy:布尔值。表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
2\timeout:整数。表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
3\maximumAge:整数/常量(infinity)。表示浏览器重新获取位置信息的时间间隔。
你是否很疑惑timeout和maximumAge?
timeout很好理解。那maximumAge如何使用呢?
如果浏览器没有在maximumAge设定的时间内更新过位置数据,它就必须重新发起请求。如果将maximumAge设置为0,则浏览器每次请求时都需要重新获取位置数据,如果设置为常量infinity则意味着浏览器永远不再获取位置数据。
在某些应用开发中,我们可以需要实时获取\检测用户的位置信息,还有HTML5 Geolocation的程序设计师考虑到这一点,为我们设计了watchPosition方法,watchPosition就像一个追踪器一样实时监视 用户的位置变化,只要用户的位置发生变化,只要开发者为HTML5 Geolocation指定了watchPostion,浏览器就发触发successCallback或errorCallback。
navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);
如果你的应用程序中为HTML5 Geolocation添加了watchPosition,那么你还应该为用户提供关闭这种实时监视位置信息变化的功能,这里我们可以使用HTML5 Geolocation的clearWatch方法。
HTML5 Geolocation的clearWatch方法接受一个watchPosition ID为参数。意思就是清除指定的watchPosition。watchPosition ID来自于watchPosition的返回值,每个watchPosition都会返回一个watchPosition ID。
var watchPositionID = navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);
navigator.geolocation.clearWatch(watchPositionID);
以上就是目前HTML5 Geolocation API中的所有接口的用法。
HTML5 Geolocation可以帮助开发者获取用户的纬度和经度的数据,但无法获取到更加详细的用户位置数据。比如国家代码\城市等等。
其实在实际项目开发中我们可能需要借助第三方工具(比如Google Map)来完成产品的需求。比如说帮助用户自动选择省份\地区,帮助用户做地图坐标定位等等。
转自 LyChi’s Blog