Thuộc tính navigator.geolocation trong HTML

Thuộc tính navigator.geolocation trong HTML trả về một đối tượng Geolocation có thể được sử dụng để xác định vị trí của người dùng.

Cú pháp

Cú pháp cơ bản như sau:

navigator.geolocation

Ví dụ

Dưới đây là ví dụ minh họa cách sử dụng thuộc tính navigator.geolocation để lấy tọa độ vị trí của người dùng:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 20px;
    width: 330px;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .show {
    font-size: 1.2rem;
    color: #fff;
  }
</style>
<body>
<h1>Demo thuộc tính navigator.geolocation</h1>
<button class="btn" onclick="display()">Hiển thị vị trí của bạn</button>
<div class="show"></div>
<script>
  function display() {
    var userLocation = navigator.geolocation;
    userLocation.getCurrentPosition(displayPosition);
  }
  function displayPosition(pos) {
    document.querySelector(".show").innerHTML = 
      "<p>Vĩ độ của bạn là: " + pos.coords.latitude + "</p>" +
      "<p>Kinh độ của bạn là: " + pos.coords.longitude + "</p>";
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "Hiển thị vị trí của bạn" để hiển thị tọa độ vị trí của người dùng.

Lưu ý: Trình duyệt sẽ yêu cầu cấp quyền truy cập vị trí trước khi hiển thị kết quả.