Xác định vị trí người dùng với Web Geolocation API trong JavaScript

Phương thức này trả về một ID theo dõi (watchId), được dùng để dừng theo dõi nếu cần.

navigator.geolocation.clearWatch(id)

Dùng để dừng việc theo dõi vị trí đã bắt đầu bằng watchPosition.

Ví dụ:

navigator.geolocation.clearWatch(watchId);

Lệnh này sẽ dừng gửi dữ liệu cập nhật vị trí mới đến callback.

Lưu ý quan trọng: Việc sử dụng Geolocation API cần đảm bảo chạy trong môi trường bảo mật (HTTPS hoặc localhost) và phải luôn kiểm tra trình duyệt có hỗ trợ API này hay không:

if ("geolocation" in navigator) {
  // Geolocation được hỗ trợ
} else {
  alert("Trình duyệt của bạn không hỗ trợ Geolocation.");
}

Đối tượng vị trí Geolocation API trong JavaScript

Khi sử dụng các phương thức như getCurrentPosition() hoặc watchPosition(), nếu lấy vị trí thành công, hàm callback success(position) sẽ được gọi. Trong đó, tham số position là một đối tượng vị trí chứa thông tin địa lý đầy đủ của thiết bị người dùng.

position.coords

Đây là đối tượng chứa tọa độ và thông tin liên quan đến định vị:

Ví dụ:

navigator.geolocation.getCurrentPosition((position) => {
  const coords = position.coords;
  console.log('Vĩ độ:', coords.latitude);
  console.log('Kinh độ:', coords.longitude);
  console.log('Độ chính xác:', coords.accuracy, 'mét');
  console.log('Độ cao:', coords.altitude);
  console.log('Tốc độ:', coords.speed);
});

Lưu ý: Một số thuộc tính như altitude, heading, và speed phụ thuộc vào thiết bị và cảm biến nên có thể không phải lúc nào cũng có giá trị.

position.timestamp

• Là dấu thời gian (timestamp, dạng số) ghi nhận vị trí.

• Giá trị này là thời điểm hệ thống ghi lại dữ liệu vị trí, tính theo milliseconds từ Unix Epoch (01/01/1970).

Ví dụ:

navigator.geolocation.getCurrentPosition((position) => {
  const time = new Date(position.timestamp);
  console.log('Vị trí lấy lúc:', time.toLocaleString());
});

Điều này hữu ích để kiểm tra dữ liệu có còn “mới” hay không, hoặc so sánh thời gian giữa các lần cập nhật.

Tùy chọn trong geolocation trong JavaScript

Khi sử dụng getCurrentPosition() hoặc watchPosition(), bạn có thể truyền vào một đối tượng options để tùy chỉnh hành vi lấy vị trí. Các tùy chọn này giúp cân bằng giữa độ chính xác, tốc độ phản hồi và hiệu quả sử dụng tài nguyên.

Các thuộc tính tùy chọn:

Ví dụ cấu hình:

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 10000
};

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

Ứng dụng thực tế Geolocation API trong JavaScript

Geolocation API có nhiều ứng dụng hữu ích trong các dịch vụ và ứng dụng web hiện đại, đặc biệt khi kết hợp với bản đồ hoặc API bên ngoài.

Một số ứng dụng phổ biến:

• Gợi ý địa điểm gần người dùng

  Ví dụ: nhà hàng, trạm xăng, cửa hàng gần nhất.

• Hiển thị bản đồ theo vị trí thực tế

  Kết hợp với Google Maps, Leaflet hoặc Mapbox để vẽ bản đồ tương tác tại vị trí hiện tại.

• Tính toán khoảng cách đến địa điểm cụ thể

  Dùng để hiển thị người dùng cách xa một địa điểm bao nhiêu km.

• Cập nhật vị trí theo thời gian thực

  Dùng trong ứng dụng giao hàng, du lịch, định vị phương tiện,...

Một số ví dụ minh họa Geolocation API trong JavaScript

Lấy vị trí hiện tại và hiển thị trong console:

navigator.geolocation.getCurrentPosition((position) => {
  console.log(`Lat: ${position.coords.latitude}, Lng: ${position.coords.longitude}`);
});

Hiển thị tọa độ trên bản đồ (ví dụ với Google Maps):

const lat = position.coords.latitude;
const lng = position.coords.longitude;
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat, lng },
  zoom: 15
});
new google.maps.Marker({ position: { lat, lng }, map });

Theo dõi vị trí khi người dùng đang di chuyển:

const watchId = navigator.geolocation.watchPosition((position) => {
  console.log(`Đang di chuyển: ${position.coords.latitude}, ${position.coords.longitude}`);
});

Hiển thị thông báo nếu người dùng từ chối cấp quyền

4. Hiển thị thông báo nếu người dùng từ chối cấp quyền:
javascript
Sao chép
Chỉnh sửa