getCurrentPosition用法介紹

admin發表於2017-02-22
html5中的GPS定位功能主要用的是getCurrentPosition。

該方法封裝在 navigator.geolocation 屬性裡，是 navigator.geolocation 物件的方法。

getCurrentPosition()函式簡介:

[JavaScript] 純文字檢視 複製程式碼
getCurrentPosition(successCallback,errorCallback,positionOptions)

（1）.successCallback:

表示呼叫getCurrentPosition函式成功以後的回撥函式，該函式帶有一個引數，物件字面量格式，表示獲取到的使用者位置資料。

該物件包含兩個屬性 coords 和 timestamp。

其中 coords 屬性包含以下7個值：

[JavaScript] 純文字檢視 複製程式碼
accuracy：精確度
latitude：緯度
longitude：經度
altitude：海拔
altitudeAcuracy：海拔高度的精確度
heading：朝向
speed：速度

（2）.errorCallback:

和successCallback函式一樣帶有一個引數，物件字面量格式，表示返回的錯誤程式碼。

它包含以下兩個屬性:

[JavaScript] 純文字檢視 複製程式碼
1.message：錯誤資訊。
2.code：錯誤程式碼。
其中錯誤程式碼包括以下四個值：
1.UNKNOW_ERROR：表示不包括在其它錯誤程式碼中的錯誤，這裡可以在 message 中查詢錯誤資訊
2.PERMISSION_DENIED：表示使用者拒絕瀏覽器獲取位置資訊的請求
3.POSITION_UNAVALIABLE：表示網路不可用或者連線不到衛星
4.TIMEOUT：表示獲取超時。必須在options中指定了timeout值時才有可能發生這種錯誤

（3）.positionOptions:

positionOptions 的資料格式為JSON，有三個可選的屬性:

[JavaScript] 純文字檢視 複製程式碼
1.enableHighAcuracy:布林值，表示是否啟用高精確度模式，如果啟用這種模式，瀏覽器獲取位置資訊可能需要耗費更多時間。
2.timeout：整數,表示瀏覽需要在指定的時間內獲取位置資訊，否則觸發errorCallback。
3.maximumAge:整數/常量，表示瀏覽器重新獲取位置資訊的時間間隔。

getCurrentPosition()函式定位應用:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function showLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("Latitude : " + latitude + " Longitude: " + longitude);
}
 
function errorHandler(err) {
  if (err.code == 1) {
    alert("Error: Access is denied!");
  }
  else if (err.code == 2) {
    alert("Error: Position is unavailable!");
  }
}
 
function getLocation() {
  if (navigator.geolocation) {
    // timeout at 60000 milliseconds (60 seconds)
    var options = { timeout: 60000 };
    navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
  }
  else {
    alert("Sorry, browser does not support geolocation!");
  }
}
</script>
</head>
<body>
  <form>
    <input type="button" onclick="getLocation();" value="Get Location" />
  </form>
</body>
</html>

點選按鈕，就可以回提示是否獲取當前位置，允許之後，可以獲取你所在位置的經緯度

相關文章