LẤY VỊ TRÍ NGƯỜI DÙNG VỚI JAVASCRIPT

Trong nhiều trường hợp, việc xác định vị trí (kinh độ, vĩ độ) là vô cùng cần thiết, ví dụ như: chỉ đường, hiển thị thông tin thời tiết,… Bài viết này mình sẽ hướng dẫn các bạn cách lấy vị trí người dùng vô cùng đơn giản.

Lấy vị trí người dùng sử dụng Geolocation API

Geolocation API được hỗ trợ bởi hầu hết các trình duyệt, cho phép người dùng cung cấp vị trí của họ cho một ứng dụng web.

Một số đặc điểm quan trọng của Geolocation API:

• Người dùng sẽ được hỏi để cung cấp vị trí hay không. Nếu họ đồng ý thì API này mới được phép lấy vị trí người dùng.
• Chỉ hỗ trợ https.

Với những đặc điểm trên, bạn có thể thấy rằng Geolocation API sẽ đảm bảo được tính riêng tư cho người dùng. Tuy nhiên, do chỉ hỗ trợ https nên bạn sẽ không thể test được API này nếu sử dụng trên localhost (http). Nhưng không sao, bạn vẫn có thể tạo một Pen trên codepen.io để test tính năng này.

Bạn có thể xem ví dụ của mình tại đây

Cách sử dụng Geolocation API

Trước tiên, bạn có thể kiểm tra xem trình duyệt có hỗ trợ Geolocation hay không:

let geolocation = navigator.geolocation;
if (geolocation) {
  // Có hỗ trợ geolocation
} else {
  // Không hỗ trợ geolocation
}

Sau khi đã chắc chắn rằng trình duyệt có hỗ trợ Geolocation, bạn có thể gọi phương thức getCurrentPosition để lấy vị trí người dùng.

let options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
geolocation.getCurrentPosition(onGeoSuccess, onGeoError, options);

Hàm này có 3 tham số đầu vào:

• onGeoSuccess: hàm callback được gọi khi việc lấy vị trí thành công
• onGeoError: hàm callback được gọi khi việc lấy vị trí bị lỗi
• options: là một object, chứa một số cài đặt kèm theo, như độ chính xác, timeout, thời gian position được cached (giá trị này = 0 nghĩa là không bao giờ cache position). Bạn có thể đọc thêm về các option trên tại đây.

Xử lý khi lấy vị trí người dùng thành công

function onGeoSuccess(position) {
  $("#lat").innerHTML = position.coords.latitude;
  $("#lon").innerHTML = position.coords.longitude;
}

Có 2 thông số quan trọng trong kết quả position trả về là vĩ độ (position.coords.latitude) và kinh độ (position.coords.longitude). Như vậy là bạn đã có được vị trí người dùng rồi, phải không?

Xử lý lỗi

function onGeoError(error) {
  let detailError;
  
  if(error.code === error.PERMISSION_DENIED) {
    detailError = "User denied the request for Geolocation.";
  } 
  else if(error.code === error.POSITION_UNAVAILABLE) {
    detailError = "Location information is unavailable.";
  } 
  else if(error.code === error.TIMEOUT) {
    detailError = "The request to get user location timed out."
  } 
  else if(error.code === error.UNKNOWN_ERROR) {
    detailError = "An unknown error occurred."
  }
  
  $("#error").innerHTML = `Error: ${detailError}`;
}

Có nhiều trường hợp có thể xảy ra lỗi khi lấy vị trí người dùng, nhưng quan trọng nhất là 2 lỗi sau:

• PERMISSION_DENIED: người dùng không cho phép lấy vị trí khi được hỏi.
• TIMEOUT: quá thời gian cho phép mà chưa có phản hồi, thường do tốc độ mạng chậm.

Trên đây là cách sử dụng cơ bản của Geolocation API, ngoài ra bạn có thể đọc thêm về watch_position – phương thức này dùng để theo dõi sự thay đổi vị trí người dùng.

Nguồn than khảo :

• https://www.w3schools.com/html/html5_geolocation.asp
• https://completejavascript.com/hai-cach-lay-vi-tri-nguoi-dung/