HTML DOM Geolocation thuộc tính vị trí địa lý

Thuộc tính tọa độ vị trí địa lý DOM DOM được sử dụng để lấy vị trí thiết bị của người dùng và độ cao trên trái đất. Người dùng phải chấp thuận rằng họ muốn cung cấp tọa độ trước khi thuộc tính này có thể hoạt động. Điều này được thực hiện để quyền riêng tư của người dùng không bị xâm phạm. Điều này có thể được sử dụng để theo dõi vị trí thiết bị khác nhau.

Thuộc tính

Sau đây là thuộc tính vị trí -

Lưu ý - Các thuộc tính dưới đây là chỉ đọc -

Thuộc tính	Mô tả
position.coords	Để trả về một đối tượng tọa độ có thông tin như vĩ độ, kinh độ, độ cao và tốc độ của thiết bị trên trái đất. Nó cũng có giá trị độ chính xác mô tả độ chính xác của các phép đo tính bằng mét.
position.timestamp	Để biểu diễn thời gian và ngày tại đó đối tượng vị trí được tạo. Nó trả về một DOMTimeStamp đại diện cho thời gian đó.

Cú pháp

Sau đây là cú pháp cho thuộc tính Vị trí địa lý -

position.property

Ở đây, thuộc tính có thể là một trong hai thuộc tính trong bảng trên.

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ về thuộc tính Vị trí địa lý -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Geolocation thuộc tính vị trí địa lý

Khi nhấp vào nút PHỐI HỢP -

HTML DOM Geolocation thuộc tính vị trí địa lý

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một nút PHỐI HỢP sẽ thực thi phương thức getCoords () khi người dùng nhấp vào -

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

Hàm getCoords () nhận thuộc tính định vị địa lý của đối tượng điều hướng để kiểm tra xem trình duyệt có hỗ trợ định vị địa lý hay không. Nếu trình duyệt hỗ trợ định vị địa lý, nó sẽ trả về một đối tượng Định vị địa lý. Sử dụng phương thức getCurrentPosition () của thuộc tính định vị địa lý của bộ điều hướng, chúng ta có được vị trí hiện tại của thiết bị. Phương thức getCurrentPosition () là một hàm gọi lại và nó nhận một hàm làm đối tượng cho tham số của nó vì mọi hàm đều là một đối tượng trong JavaScript.

Ở đây, chúng tôi đã chuyển phương thức showCoords () cho nó. Phương thức showCoords () lấy giao diện vị trí làm tham số và sử dụng nó để hiển thị kinh độ, vĩ độ và độ chính xác bên trong một đoạn văn có id “Sample”. Nó sử dụng thuộc tính innerHTML đoạn văn để nối văn bản vào đó -

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