HTML5學習筆記 Geolocation（地理定位）

浪花一朵朵發表於2015-06-04
HTML筆記

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

定位使用者的位置

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

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

HTML5 -使用地理定位

請使用getCurrentPositon()方法來獲得使用者的位置

下例是一個簡單的地理定位的例項，可返回使用者位置的緯度和緯度

直接上程式碼吧:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="該瀏覽器不支援獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

例項解析：

檢測是否支援地理定位

如果支援，則執行getCurrentPosition()方法。如果不支援，則幾使用者顯示一段訊息。

如果getCuurentPosition()執行成功，則向引數showPosition中規定的函式返回一個coordinates物件

showPostion()函式獲取並顯示經度和緯度

處理錯誤和拒絕

getCurrentPosition()方法的第二個引數用於處理錯誤，它規定當獲取使用者位置失敗時執行的函式：

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="使用者拒絕對獲取地理位置的請求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置資訊是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="請求使用者地理位置超時。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知錯誤。"
      break;
    }
  }

Geolocation物件-其他有趣的方法

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

clearWatch()-停止watchPosition()方法

下面的例子展示watchPosition()方法，您需要一臺精確的GPS設定來測試該例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="該瀏覽器不支援獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude + 
  "<br>經度: " + position.coords.longitude; 
  }
</script>

本節完

相關文章