HTML5 Geolocation API地理定位整理（一）

HTML5 Geolocation API 用於獲得用戶的地理位置。

鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。

瀏覽器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.

注意:

1. Geolocation（地理定位）對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確。點擊查看更多參考

2.在微信的WebView中可以獲取位置，QQ的WebView中 Geolocation不可用。

3.在移動終端的watchPosition()監聽觸發間隔比PC端短很多。

一、Geolocation對象使用navigator.geolocation訪問，

只有3個方法，沒有屬性

1.getCurrentPosition(successCB,[errorCB]，[geolocationOptions]) 方法獲取用戶的位置

2.watchPosition(successCB,[errorCB],[geolocationOptions]) 方法返回用戶的位置並循環監聽，時間間隔不一定

3.clearWatch() ---清楚watchPosition()的監聽實例

特別說明：

successCB中參數為Geoposition對象

errorCB中參數為PositionError對象

geolocationOptions 參數對象說明：

1.enableHighAccuracy：指示獲取位置的精確度，默認為false。如果設置為true，使用精確定位(衛星定位/GPS)，在PC端瀏覽器基本上都執行errorCB，也就是獲取失敗

2.timeout：獲取位置的最長等待時間，默認不限時間

3.maximumAge：接受不超過指定時間毫秒的緩存位置，也就是在重復獲取位置時，多長時間之后再次獲取位置。

注：在Google瀏覽器測試修改時間參數並沒有效果，待確認。

二、Geoposition對象

獲取位置成功返回的對象

1.coords 坐標信息

2.timestamp 獲取位置的時間戳

始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。

屬性	描述
coords.latitude	十進制數的緯度
coords.longitude	十進制數的經度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	響應的日期/時間

三、PositionError對象

獲取位置信息失敗時返回的對象

• Permission denied - 用戶不允許地理定位
• Position unavailable - 無法獲取當前位置
• Timeout - 操作超時

 四、使用實例

1.判斷瀏覽器是否支持Geolocation對象

if (navigator.geolocation) {
    console.info(navigator.geolocation);
} else {
    console.log('你的瀏覽器不支持地理定位');
}

2.獲取用戶位置

if (navigator.geolocation) {
    //獲取地理位置需要等比較長的一段時間
    //尤其是在PC段，根據IP獲取的
    navigator.geolocation.getCurrentPosition(successCB, errorCB);
} else {
    console.log('你的瀏覽器不支持地理定位');
}
//獲取地理位置成功
function successCB(position) {
    console.info(position);
    console.log('位置精度:'+position.coords.accuracy);
    console.log('維度：'+position.coords.latitude);
    console.log('經度：'+position.coords.longitude);
}
//獲取地理位置失敗
function errorCB(error) {
    console.error(error);
    var msg='';
    switch (error.code) {
        case error.PERMISSION_DENIED:
            msg = "用戶拒絕對獲取地理位置的請求。"
            break;
        case error.POSITION_UNAVAILABLE:
            msg = "位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            msg = "請求用戶地理位置超時。"
            break;
        case error.UNKNOWN_ERROR:
            msg = "未知錯誤。"
            break;
    }
    console.error(msg);
}

3.使用精確模式

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示瀏覽器獲取高精度的位置，默認為false
        enableHighAccuracy: true,
        // 指定獲取地理位置的超時時間，默認不限時，單位為毫秒
        timeout: 5000,
        // 最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

 

 

更多：

HTML5 Geolocation API地理定位整理（二）

HTML5 離線緩存詳解（轉）

HTML5 History對象，Javascript修改地址欄而不刷新頁面（二）

HTML5 Geolocation API工作原理[轉載]