Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính tọa độ vị trí địa lý HTML DOM

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 anh ta 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í của thiết bị khác nhau.

Thuộc tính

Sau đây là thuộc tính tọa độ -

Lưu ý - Tất cả các thuộc tính này là chỉ đọc và kiểu trả về của chúng là kép.

Sr.No Thuộc tính &Mô tả
1 toạ độ.latitude
Để trả về vĩ độ của vị trí thiết bị theo độ thập phân.
2 toạ độ.longitude
Để trả về kinh độ của vị trí thiết bị theo độ thập phân
3 toạ độ.altitude
Để trả về độ cao của vị trí tính bằng mét, so với mực nước biển. Nó có thể trả về null nếu không có GPS trong thiết bị.
4 precision.accuracy
Để trả về độ chính xác của các thuộc tính kinh độ và vĩ độ tính bằng mét
5 toạ độ.altitudeAccuracy
Để trả về độ chính xác của thuộc tính độ cao tính bằng mét
6 toạ độ.heading
Để quay lại hướng mà thiết bị đang di chuyển. Giá trị này, được chỉ định bằng độ, cho biết khoảng cách so với hướng đúng về phía bắc của thiết bị. 0 độ đại diện cho phía bắc thực và hướng được xác định theo chiều kim đồng hồ (phía đông là 90 độ và phía tây là 270 độ). Nếu tốc độ bằng 0, đầu đề là NaN. Nếu thiết bị không thể cung cấp thông tin tiêu đề, giá trị này là null
7 toạ độ.speed
Để trả về vận tốc của thiết bị tính bằng mét trên giây. Giá trị này có thể là null.

Cú pháp

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

coordinates.property

“Thuộc tính” có thể là một trong những thuộc tính trên được đề cập trong bảng.

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ cho thuộc tính tọa độ 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 -

Thuộc tính tọa độ vị trí địa lý HTML DOM

Khi nhấp vào nút PHỐI HỢP và nhấp vào Cho phép trên cửa sổ bật lên “Biết vị trí của bạn” -

Thuộc tính tọa độ vị trí địa lý HTML DOM

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 được 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;
}