該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>
試一試»