使用HTML5 Geoloatio API获取地理位置信息

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

HTML 预览
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

HTML 预览
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>Latitude:' +    
                lat +    
                '</li><li>Longitude:' +    
                lon +    
                '</li><li>Region Name:' +    
                geoip_region_name() +    
                '</li><li>City:' +    
                geoip_city() +    
                '</li>' +    
                '<li>Country：' +    
                geoip_country_name() +    
                '</li>' +    
                '<li>Country Code：' +    
                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

HTML 预览
var error = function(error){    
                        var info = document.getElementById('renderData');    
    
                        info.innerHTML = '';    
    
                        info.innerHTML = info.innerHTML += '<h3>Error log：</h3>' +    
                        '<ul><li>Error Code:' +    
                        error.code +    
                        '</li><li>Error Message:' +    
                        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。

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

以上就是目前HTML5 Geolocation API中的全部接口的用法。
HTML5 Geolocation能够帮助开发者获取用户的纬度和经度的数据，但没法获取到更加详细的用户位置数据。好比国家代码＼城市等等。

其实在实际项目开发中咱们可能须要借助第三方工具（好比Google Map）来完成产品的需求。好比说帮助用户自动选择省份＼地区，帮助用户作地图坐标定位等等。

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

转载于猿2048:➞《使用HTML5 Geoloatio API获取地理位置信息》