关于html5地理定位的基础总结

基本示例

• html基础代码：

    
    



    

        Your location will go here;
    

• js代码：

var options = {enableHighAccuracy:true,timeout:100,maximumAge:0};
    window.onload = getMyLocation;
    function getMyLocation(){
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(displayPosition,displayError,options);
      }else{
          alert('the broswer do not support geolocation.');
      }
    };
    function displayPosition(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var location = document.getElementById('location');
        location.innerHTML = 'You position is at Latitude:' + latitude + ',Longitude:' + longitude;
        location.innerHTML += " (found in " + options.timeout + " milliseconds)";
    }

    function displayError(error){
        var errorTypes = {
            0 : 'Unknown error',
            1 : 'Permission denied by user',
            2 : 'Position is not available',
            3 : 'Request timed out'
        };
        var errMsg = errorTypes[error.code];
        if(error.code === 0 || error.code === 2){
            errMsg += ' ' + error.message;
        }
        var location = document.getElementById('location');
        location.innerHTML = errMsg;

        options.timeout += 100;
        navigator.geolocation.getCurrentPosition(displayPosition,displayError,options);
        location.innerHTML += "…… checking again with timeout = " + options.timeout;

地理定位中概要知识点

1. 与蜂窝基站三角定位或网络IP相比，GPS是获取位置的一种更为精确的方法。

2. 地理定位API的主要方法是getCurrentPosition，这是navigator.geolocation对象的一个方法，navigator.geolocation是navigator对象中的一个属性，它也是一个对象，包含了整个地理定位API。

3. getCurrentPosition是API的一个主要方法，它的功能是获取当前浏览器的位置，它有一个必要参数，即成功处理程序，还有两个可选参数，分别是错误处理程序和选项。
   navigator.geolocation.getCurrentPosition(successHandler,errorHandler,options)

• successHandler：获取位置成功时候的调用函数
• errorHandler：获取位置出错时的调用函数
• options：允许定制地理定位方法

4. position对象包含一个coords属性，这是一个coordinates对象。

5. coordinate对象的属性包括纬度(latitude)和经度(longitude)和精度(accuracy)。

6. 调用getCurrentPosition时，浏览器必须验证你允许共享你的位置。

7. getCurrentPosition的第三个参数options对象有一些属性，可以设置这些属性来控制地理定位API的行为。

8. maximumAge属性确定getCurrentPosition是否使用一个缓存位置，如果是，他指定了请求一个全新位置之前这个位置的最大年龄。

9. timeout属性确定调用错误处理程序之前getCurrentPosition可以有多长时间来得到一个全新的位置。

10. enableHighAccuracy属性向设备提供一个提示，如果可以得到一个高精度的位置，需要更多能量。

11. 可以使用地理位置定位API并结合Google Maps API（BMap百度地图API）在地图上显示你的位置。

相关截图解析

获取位置数据函数解析：

获取位置方法调用.png

成功处理程序解析：

成功处理程序.png

错误处理程序解析：

错误处理程序.png

选项解析：

选项设置.png

示例是我从书上摘下来的，详情更多可以参考书籍：《Head First HTML5 Programming》