Định vị địa lý (Geolocation) trong HTML

API Geolocation trong HTML5 cho phép trang web lấy **vị trí địa lý thực tế** của người dùng (vĩ độ, kinh độ) — **chỉ khi người dùng cho phép**. Đây là cơ sở cho các ứng dụng: bản đồ, tìm đường, thời tiết địa phương, tìm cửa hàng gần đó, check-in, v.v.

Lưu ý bảo mật: Kể từ Chrome 50+, Geolocation **chỉ hoạt động trên HTTPS** (localhost được coi là an toàn). Trên HTTP, yêu cầu bị bỏ qua.

Cú pháp cơ bản

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

Đối tượng Position (trả về trong successCallback)

Ví dụ hoàn chỉnh: Lấy vị trí, hiển thị lỗi, mở Google Maps

<!DOCTYPE html>
<html>
<head>
  <title>HTML Geolocation Demo</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    input[type="button"] { border-radius: 10px; }
    #mapLink { color: #0066cc; text-decoration: underline; cursor: pointer; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Định vị địa lý</legend>
      <button type="button" onclick="getLocation()">Cập nhật vị trí</button>
      <button type="button" onclick="openMap()" id="mapBtn" disabled>Mở Google Maps</button>
      <div id="status">Chưa lấy vị trí</div>
      <div>
        <span id="lat">Vĩ độ: --</span> |
        <span id="lng">Kinh độ: --</span>
      </div>
      <div>Độ chính xác: <span id="acc">--</span> mét</div>
    </fieldset>
  </form>
  <script>
    var latEl = document.getElementById("lat");
    var lngEl = document.getElementById("lng");
    var accEl = document.getElementById("acc");
    var status = document.getElementById("status");
    var mapBtn = document.getElementById("mapBtn");
    var currentPos = null;

    function getLocation() {
      status.textContent = "Đang xác định vị trí...";
      if (!navigator.geolocation) {
        status.textContent = "Trình duyệt không hỗ trợ Geolocation";
        return;
      }
      navigator.geolocation.getCurrentPosition(onSuccess, onError, {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0
      });
    }

    function onSuccess(pos) {
      currentPos = pos;
      latEl.textContent = "Vĩ độ: " + pos.coords.latitude.toFixed(6);
      lngEl.textContent = "Kinh độ: " + pos.coords.longitude.toFixed(6);
      accEl.textContent = pos.coords.accuracy.toFixed(1);
      status.textContent = "✓ Đã cập nhật vị trí";
      mapBtn.disabled = false;
    }

    function onError(err) {
      switch (err.code) {
        case err.PERMISSION_DENIED:
          status.textContent = "✗ Bạn đã từ chối chia sẻ vị trí";
          break;
        case err.POSITION_UNAVAILABLE:
          status.textContent = "✗ Không thể xác định vị trí";
          break;
        case err.TIMEOUT:
          status.textContent = "✗ Hết thời gian chờ";
          break;
        default:
          status.textContent = "✗ Lỗi không xác định: " + err.message;
      }
      mapBtn.disabled = true;
    }

    function openMap() {
      if (!currentPos) return;
      var lat = currentPos.coords.latitude;
      var lng = currentPos.coords.longitude;
      var url = "https://www.google.com/maps/@" + lat + "," + lng + ",15z";
      window.open(url, "_blank");
    }
  </script>
</body>
</html>

Các tùy chọn (options) quan trọng

• enableHighAccuracy: true: Yêu cầu độ chính xác cao (GPS), tiêu tốn pin nhiều hơn, chậm hơn.
• timeout: 10000: Thời gian chờ tối đa (ms).
• maximumAge: 0: Không dùng vị trí cache, buộc lấy mới.

Phương thức khác: watchPosition()

Theo dõi vị trí liên tục (ví dụ: dẫn đường):

var watchId = navigator.geolocation.watchPosition(onSuccess, onError, options);
// Để dừng:
navigator.geolocation.clearWatch(watchId);

Xử lý từ chối quyền

Nếu người dùng chọn "Block" (chặn) vĩnh viễn, trình duyệt nhớ quyết định. Cần hướng dẫn người dùng vào cài đặt trình duyệt (biểu tượng khóa/globe bên thanh địa chỉ) để bật lại quyền.