Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính HTML DOM Geolocation position

Thuộc tính Geolocation position dùng để lấy vị trí và độ cao của thiết bị người dùng trên Trái Đất. Người dùng phải cho phép chia sẻ vị trí trước khi thuộc tính này hoạt động (đảm bảo quyền riêng tư). Có thể dùng để theo dõi vị trí thiết bị.

Thuộc tính của đối tượng position

Lưu ý: Các thuộc tính dưới đây chỉ đọc (read-only).

Thuộc tínhMô tả
position.coordsTrả về đối tượng Coordinates chứa vĩ độ (latitude), kinh độ (longitude), độ cao (altitude), tốc độ (speed) của thiết bị. Cũng có giá trị accuracy (độ chính xác tính bằng mét).
position.timestampTrả về DOMTimeStamp biểu thị thời điểm đối tượng position được tạo.

Cú pháp

position.property

Trong đó property là một trong hai thuộc tính ở bảng trên.

Ví dụ

Ví dụ lấy tọa độ địa lý của người dùng:

<!DOCTYPE html>
<html>
<body>
<h1>Thuộc tính Geolocation coordinates</h1>
<p>Nhấn nút bên dưới để lấy tọa độ của bạn</p>
<button onclick="getCoords()">TỌA ĐỘ</button>
<p id="Sample">Tọa độ của bạn:</p>
<script>
  var output = document.getElementById("Sample");
  function getCoords() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showCoords);
    } else {
      output.innerHTML = "Trình duyệt này không hỗ trợ định vị địa lý.";
    }
  }
  function showCoords(position) {
    output.innerHTML = "Kinh độ: " + position.coords.longitude +
      "<br>Vĩ độ: " + position.coords.latitude +
      "<br>Độ chính xác: " + position.coords.accuracy + " mét";
  }
</script>
</body>
</html>

Kết quả

Ban đầu hiển thị nút "TỌA ĐỘ" và dòng "Tọa độ của bạn:".

Sau khi nhấn nút và cho phép truy cập vị trí, hiển thị kinh độ, vĩ độ và độ chính xác (ví dụ: "Kinh độ: 106.6297, Vĩ độ: 10.8231, Độ chính xác: 50 mét").

Giải thích

  • Nút "TỌA ĐỘ" gọi hàm getCoords().
  • Hàm kiểm tra navigator.geolocation (hỗ trợ hay không).
  • Nếu hỗ trợ, gọi getCurrentPosition(showCoords) - hàm callback nhận đối tượng position.
  • Hàm showCoords() trích xuất position.coords.longitude, latitude, accuracy và hiển thị.