HTML DOM 地理位置座標屬性-html教學-PHP中文網

HTML DOM 地理位置座標屬性

WBOY

發布： 2023-09-06 20:05:07

轉載

635 人瀏覽過

HTML DOM 地理定位座標屬性用於取得使用者裝置在地球上的位置和海拔高度。使用者必須批准他想要提供座標，此屬性才能運作。這樣做是為了不損害用戶的隱私。這可用於追蹤各種設備的位置。

屬性

以下是座標屬性 -

注意 - 所有這些屬性是唯讀的，並且傳回類型為 double。

Sr.No th>	屬性及描述
1	coordinates.latitude 返回裝置位置的緯度（以十進制度為單位）。
2	座標.經度 #傳回裝置位置的經度（以十進制度為單位）
3	coefficients.altitude 返回位置的海拔高度（以公尺為單位），相對到海平面。如果設備中沒有 GPS，則可以傳回 null。
4	座標。精度傳回緯度和經度屬性的精確度（以公尺為單位）
5	coordinates.altitudeAccuracy 傳回海拔屬性的精確度（以公尺為單位）
6	cocos.heading #返回裝置行進的方向。該值（以度為單位）表示設備與正北航向的距離。 0度代表真北，方向依順時針方向決定（東為90度，西為270度）。如果速度為 0，則航向為 NaN。如果裝置無法提供航向訊息，則該值為null
7	#座標.speed 傳回裝置的速度（以米每秒為單位）。該值可以為 null。

語法

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

coordinates.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&#39;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>

登入後複製

輸出

這將產生以下輸出-

HTML DOM Geolocation coordinates属性

點擊「座標」按鈕並在「了解您的位置」彈出視窗中點擊「允許」時-

HTML DOM 地理位置座標屬性

在上面的範例中-

我們先建立了一個按鈕COORDINATES 將在使用者點擊時執行getCoords() 方法-

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

登入後複製

getCoords() 函數取得導航器物件的地理定位屬性，以檢查瀏覽器是否支援地理定位。如果瀏覽器支援地理定位，它將傳回一個 Geolocation 物件。使用導航器地理定位屬性的 getCurrentPosition() 方法，我們可以獲得裝置的目前位置。 getCurrentPosition() 方法是一個回呼函數，它接受一個函數作為其參數的對象，因為每個函數都是 JavaScript 中的一個對象。

這裡，我們將 showCoords() 方法傳遞給它。 showCoords() 方法以位置介面作為參數，並使用它來顯示 id 為「Sample」的段落內的經度、緯度和精確度。它使用段落innerHTML屬性向其附加文字 -

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

登入後複製

以上是HTML DOM 地理位置座標屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！