HTML DOM Geolocation coordinates屬性用法及代碼示例

HTML DOM Geolocation 坐標屬性用於獲取用戶在地球上的設備位置和高度。用戶必須批準他想在此屬性起作用之前提供坐標。這樣做是為了不損害用戶的隱私。這可用於跟蹤各種設備的位置。

特性

以下是坐標屬性 -

注意- 所有這些屬性都是隻讀的，它們的返回類型是雙精度的。

Sr.No	屬性和描述
1	coordinates.latitude 以十進製度數返回設備位置的緯度。
2	coordinates.longitude 以十進製度數返回設備位置的經度
3	coordinates.altitude 以米為單位返回位置相對於海平麵的高度。如果設備中沒有 GPS，它可以返回 null。
4	coordinates.accuracy 以米為單位返回緯度和經度屬性的準確性
5	coordinates.altitudeAccuracy 以米為單位返回高度屬性的精度
6	coordinates.heading 返回設備行駛的方向。該值以度數指定，表示設備與正北方向的距離。 0 度代表真北，方向為順時針方向(東為 90 度，西為 270 度)。如果速度為 0，則標題為 NaN。如果設備無法提供航向信息，則該值為空
7	coordinates.speed 以米/秒為單位返回設備的速度。該值可以為空。

用法

以下是 GeoLocation 坐標屬性的語法 -

coordinates.property

“property” 可以是表中提到的上述屬性之一。

示例

讓我們看一個 GeoLocation 坐標屬性的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation coordinates property</h1>
<p>Get you coordinates by clicking the below button</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">Your coordinates are:</p>
<script>
   var p = document.getElementById("Sample");
   function getCoords() {
      if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(showCoords);
      } else {
         p.innerHTML ="This browser doesn't support geolocation.";
      }
   }
   function showCoords(position) {
      p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude:" + position.coords.latitude+"<br>Accuracy:"+ position.coords.accuracy;
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊坐標按鈕並單擊 “Know your location” 彈出窗口上的允許 -

在上麵的例子中 -

我們首先創建了一個按鈕 COORDINATES，它將在用戶單擊時執行 getCoords() 方法 -

<button onclick="getCoords()">COORDINATES</button>

getCoords() 函數獲取導航器對象地理定位屬性來檢查瀏覽器是否支持地理定位。如果瀏覽器支持地理定位，它將返回一個地理定位對象。使用導航器地理定位屬性的 getCurrentPosition() 方法，我們可以獲得設備的當前位置。 getCurrentPosition() 方法是一個回調函數，它將一個函數作為其參數的對象，因為在 JavaScript 中每個函數都是一個對象。

在這裏，我們將 showCoords() 方法傳遞給它。 showCoords() 方法以位置接口為參數，用它來顯示id 為“Sample” 的段落內的經度、緯度和精度。它使用段落 innerHTML 屬性向其附加文本 -

function getCoords() {
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showCoords);
   } else {
      p.innerHTML ="This browser doesn't support geolocation.";
   }
}
function showCoords(position) {
   p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude:" + position.coords.latitude+"<br>Accuracy:"+ position.coords.accuracy;
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Geolocation coordinates property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。