HTML5全球定位系统Geolocation初探

来源：互联网发布：mac分区后怎么恢复编辑：程序博客网时间：2024/05/20 11:46

对于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

JavaScript Code复制内容到剪贴板

if (navigator.geolocation) {
//do something
}else{
alert('Sorry,your device not support geolocation!');
}

继续探讨HTML5 Geolocation API。浏览器支持HTML5 Geolocation，我们如何获取用户的当前地理位置信息？

JavaScript Code复制内容到剪贴板

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,positionOptions);

navigator.geolocation对象有一个方法getCurrentPosition用来获取用户当前位置信息，该方法带有三个参数：
1＼successCallback：成功获取用户位置信息后的回调函数
2＼errorCallback：获取用户位置信息失败时的回调函数
3＼positionOptions：可选。获取用户位置信息的配置参数
我们先来看看successCallback

JavaScript Code复制内容到剪贴板

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

JavaScript Code复制内容到剪贴板

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>';
}

errorCallback和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。

JavaScript Code复制内容到剪贴板

navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);

如果你的应用程序中为HTML5 Geolocation添加了watchPosition，那么你还应该为用户提供关闭这种实时监视位置信息变化的功能，这里我们可以使用HTML5 Geolocation的clearWatch方法。
HTML5 Geolocation的clearWatch方法接受一个watchPosition ID为参数。意思就是清除指定的watchPosition。watchPosition ID来自于watchPosition的返回值，每个watchPosition都会返回一个watchPosition ID。

JavaScript Code复制内容到剪贴板

var watchPositionID = navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);
navigator.geolocation.clearWatch(watchPositionID);

以上就是目前HTML5 Geolocation API中的所有接口的用法。
HTML5 Geolocation可以帮助开发者获取用户的纬度和经度的数据，但无法获取到更加详细的用户位置数据。比如国家代码＼城市等等。
其实在实际项目开发中我们可能需要借助第三方工具（比如Google Map）来完成产品的需求。比如说帮助用户自动选择省份＼地区，帮助用户做地图坐标定位等等。
在HTML5全球地理位置定位系统演示中使用了GeoIP来获取用户的国家代码＼国家名称＼省份名称＼城市名称。