Hai cách 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 hai cách lấy vị trí người dùng vô cùng đơn giản. Đó là sử dụng Geolocation API và ipinfo.io API.

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.

Đây là ví dụ mà mình đã làm:

Cách sử dụng Geolocation API

Trước tiên, bạn cần 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.

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

Ý tưởng của phương pháp này là: khi người dùng sử dụng ứng dụng web, ứng dụng sẽ gửi một request lên server ipinfo.io. Server sẽ sử dụng request này để lấy ra thông tin địa chỉ IP của nơi cung cấp dịch vụ mạng, từ đó, suy ra vị trí của người dùng.

Với cách này bạn luôn có thể lấy được thông tin vị trí người dùng. Ngoài ra, cách này còn cho phép bạn test trên localhost. Nếu không tin thì bạn có thể lấy code của mình về chạy thử.

Cách sử dụng ipinfo.io API

Bạn chỉ cần gửi một request dạng GET với kiểu dữ liệu là JSON. Trong ví dụ trên, mình sử dụng jQuery, nên chỉ cần sử dụng phương thức $.getJSON là được.

$.getJSON("https://ipinfo.io/", onLocationGot);

Kết quả trả về sẽ là một object, qua đó bạn có thể lấy ra thông tin kinh độ và vĩ độ như sau:

function onLocationGot(info) {
  let position = info.loc.split(",");
  $("#lat").text(position[0]);
  $("#lon").text(position[1]);
}

Kết luận

Như vậy là mình đã giới thiệu xong với các bạn hai cách để lấy vị trí người dùng thông qua Geolocation API và ipinfo.io API. Tóm tắt lại đặc điểm của 2 cách như sau:

• Geolocation API:
  • Hỏi người dùng xem có cho phép lấy vị trí hay không.
  • Chỉ hỗ trợ https.
• ipinfo.io API
  • Luôn luôn có thể lấy được vị trí người dùng
  • Có hỗ trợ http, có thể test trên localhost.

Xin chào và hẹn gặp lại bạn trong bài viết tiếp theo, thân ái!