现在的位置: 首页 > 综合 > 正文

HTML5全球定位系统Geolocation初探

2013年08月04日 ⁄ 综合 ⁄ 共 4235字 ⁄ 字号 评论关闭

如果你是在特意寻找有关HTML5 Geolocation文章,那相信你应该对此有所了解,可能你不太清楚HTML5 Geoloation API的使用或者你想找一个有关HTML5 Geolocation的Demo。我相信你和我一样是一个爱学习的前端工程师,爱关注web前沿技术。下面就让我们一起来看看HTML5 Geoloatio的使用。

如果你对HTML5 Geolocation非常饥渴,你可以先看看HTML5全球地理位置定位系统演示再阅读文章。

对于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隐私保护机制
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>';
                    }

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。

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)来完成产品的需求。比如说帮助用户自动选择省份\地区,帮助用户做地图坐标定位等等。

HTML5全球地理位置定位系统演示中使用了GeoIP来获取用户的国家代码\国家名称\省份名称\城市名称。

抱歉!评论已关闭.