最新的Web開發教程

HTML5地理位置


該HTML地理位置API來定位用戶的位置。


什麼是W3C地理位置API?

W3C的地理位置API是萬維網聯盟(W3C)的努力,標準化的接口來檢索客戶端設備的地理位置信息。

它定義了一組對象,ECMAScript標準兼容的,即在客戶端應用程序執行通過位置信息服務器,其是透明的應用程序編程接口(API)的諮詢給客戶端的設備的位置。

的位置信息的最常見的來源是IP地址,無線網絡連接和藍牙MAC地址,無線電頻率識別(RFID),Wi-Fi連接位置,或設備的全球定位系統(GPS)和GSM / CDMA的小區ID。

該位置還附有取決於可用的最佳位置信息源在給定的精度。


部署在Web瀏覽器

網頁可能會在Web瀏覽器中實現它直接使用地理位置API。 從歷史上看,一些瀏覽器可能獲得通過谷歌齒輪插件的支持,但是這是在2010年停產和服務器端API它取決於停止在2012年響應。

地理位置API非常適合的Web應用程序的移動設備,諸如個人數字助理(PDA)和智能電話。 在台式計算機上,W3C的地理位置API在Firefox的工作,因為3.5版本,谷歌Chrome,歌劇10.6,IE瀏覽器9.0和Safari 5在移動設備上,它適用於Android(2.0+固件)的iOS,Windows Phone的和Maemo。

適用於Android和Symbian的設備(S60代3 5)自2010年11月24日 - W3C的地理位置API也受到的Opera Mobile 10.1的支持。

谷歌齒輪為老年人和不符合標準的瀏覽器,包括Internet Explorer 7.0或更高版本的齒輪插件,和谷歌Chrome,其實現的齒輪本身提供地理位置支持。 它還支持為Android瀏覽器(預2.0版)和Opera Mobile的Windows Mobile的插件移動設備的地理位置。

然而,谷歌齒輪地理位置API與W3C地理位置API不兼容,並且不再支持。


特徵

W3C地理位置API的結果通常會給4位置的性質,包括緯度和經度(坐標),高度(高度),和[位置的精度聚集],而這一切取決於位置信息源。

在某些查詢,高度可能會產生或沒有返回值。


找到用戶的位置

該HTML地理位置API來獲取用戶的地理位置。

由於這會危及隱私,除非用戶同意它的位置是不可用的。


瀏覽器支持

在表中的數字規定,完全支持地理位置第一個瀏覽器版本。

API
Geolocation 5 9 3.5 5 16.0

Note:地理位置更為精確與GPS設備,如iPhone


使用HTML地理位置

getCurrentPosition()方法來獲取用戶的位置。

下面的示例返回用戶的位置的緯度和經度:

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
試一試»

為例進行了說明:

  • 檢查是否支持地理位置
  • 如果支持,運行getCurrentPosition()方法。 如果沒有,則顯示一條消息向用戶
  • 如果getCurrentPosition()方法是成功的,它返回一個坐標反對在參數中指定的功能(showPosition)
  • 所述showPosition()函數輸出緯度和經度

上面的例子是一個非常基本的地理位置腳本,沒有錯誤處理。


處理錯誤和拒絕

所述的第二個參數getCurrentPosition()方法用於處理錯誤。 它指定一個函數,如果它無法獲取用戶的位置運行:

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
試一試»

顯示結果在地圖

要在地圖上顯示結果,你需要訪問地圖服務,如谷歌地圖。

在下面的例子中,返回的緯度和經度是用來顯示在谷歌地圖的位置(using a static image)

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
試一試»

谷歌地圖腳本
如何顯示一個互動的谷歌地圖有一個標記,縮放和拖拽選項。


特定位置的信息

此頁面演示了如何顯示,用戶在地圖上的位置。

地理位置也是特定位置的信息,如非常有用:

  • 截至到最新的本地信息
  • 顯示點的感興趣的用戶附近
  • 逐向道路導航(GPS)

getCurrentPosition()方法-返回數據

getCurrentPosition()如果它是成功方法返回一個對象。 緯度,經度和準確性屬性始終返回。 如果有其他屬性被返回:

屬性 返回
coords.latitude 緯度為十進制數
coords.longitude 經度為十進制數
coords.accuracy 位置精度
coords.altitude 在米的海拔高度平均海平面以上
coords.altitudeAccuracy 位置的高度準確性
coords.heading 作為前進的度數從北順時針
coords.speed 以每秒米的速度
timestamp 響應的日期/時間

Geolocation對象 - 其他有趣的方法

watchPosition() -返回用戶的當前位置,並繼續返回更新的位置隨著用戶移動(like the GPS in a car)

clearWatch() -停止watchPosition()方法。

下面的例子示出了watchPosition()方法。 您需要一種精確的GPS設備來測試這個(like iPhone )

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
試一試»