HTML5怎樣正確的使用HTML的地理定位？

毫無疑問，對於開發人員而言，HTML5已是一個熱點話題。如果你需要快速瞭解HTML5的功能的基本原理，本篇主要解釋了HTML5的地理定位。

HTML5的地理定位用途

HTML5 Geolocation（地理定位）用於定位使用者的位置。

定位使用者的位置

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

鑒於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是停用。

瀏覽器支援

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支援地理定位。

注釋：對於擁有 GPS 的裝置，比如 iPhone，地理定位更加精確。

HTML5 - 使用地理定位

請使用 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中規定的函數返回一個coordinates對象

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;    }  }

錯誤碼：

Permission denied - 使用者不允許地理定位

Position unavailable - 無法擷取當前位置

Timeout - 操作逾時

在地圖中顯示結果

如需在地圖中顯示結果，您需要訪問可使用經緯度的地圖服務，比如Google地圖或百度地圖：

還有執行個體：

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+"' />";}

在上例中，我們使用返回的經緯度資料在Google地圖中顯示位置（使用靜態映像）。

上面的連結向您示範如何使用指令碼來顯示帶有標記、縮放和拖曳選項的互動式地圖。

給定位置的資訊

本頁示範的是如何在地圖上顯示使用者的位置。不過，地理定位對於給定位置的資訊同樣很有用處。

更新本地資訊

顯示使用者周圍的興趣點

互動式車載導航系統 (GPS)

getCurrentPosition() 方法 - 返回資料

若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。

屬性和描述：

coords.latitude(十進位數的緯度)

coords.longitude(十進位數的經度)

coords.accuracy(位置精度)

coords.altitude(海拔，海平面以上以米計)

coords.altitudeAccuracy(位置的海拔精度)

coords.heading(方向，從正北開始以度計)

coords.speed(速度，以米/每秒計)

timestamp(響應的日期/時間)

Geolocation 對象 - 其他有趣的方法

watchPosition() - 返回使用者的當前位置，並繼續返回使用者移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精確的 GPS 裝置來測試該例（比如 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

【相關推薦】

HTML和HTML5的發展曆史

html的基礎元素，讓你零基礎學習HTML