Hướng dẫn API định vị địa lý JavaScript – Cách lấy vị trí của người dùng trong JS

Một số ứng dụng yêu cầu bạn biết vị trí của người dùng, chẳng hạn như ứng dụng giao đồ ăn hoặc thương mại điện tử. Vì vậy, bạn sẽ cần một cách hiệu quả để có được thông tin này.

Geolocation API mà chúng ta sẽ xem xét hôm nay là một giải pháp đơn giản. Bạn có thể sử dụng nó để xác định vị trí, nội tệ, ngôn ngữ và các thông tin hữu ích khác của người dùng. Sau đó, bạn có thể sử dụng điều này để cung cấp cho họ nội dung phù hợp nhất dựa trên vị trí của họ.

Trong bài viết này, chúng ta sẽ tìm hiểu Geolocation API là gì, tại sao nó lại hữu ích và cách sử dụng nó trong các ứng dụng của bạn.

API định vị địa lý là gì?

API định vị địa lý JavaScript cung cấp quyền truy cập vào dữ liệu vị trí địa lý được liên kết với thiết bị của người dùng. Điều này có thể được xác định bằng cách sử dụng GPS, WIFI, Định vị địa lý IP, v.v.

Để bảo vệ quyền riêng tư của người dùng, nó yêu cầu quyền định vị thiết bị. Nếu người dùng cấp quyền, bạn sẽ có quyền truy cập vào dữ liệu vị trí như vĩ độ, kinh độ, độ cao và tốc độ. Bạn cũng sẽ nhận được độ chính xác của dữ liệu vị trí đã thu được và thời gian gần đúng khi thu được vị trí đó.

Dưới đây là một vài cách sử dụng cho định vị địa lý:

• Hiển thị vị trí của người dùng trên bản đồ
• Nhận thông tin địa phương cập nhật
• Hiển thị Điểm ưa thích (POI) tại địa phương gần người dùng
• Bật điều hướng từng chặng (GPS)
• Theo dõi một đội tàu hoặc phương tiện giao hàng
• Gắn thẻ ảnh với một vị trí

Cách sử dụng API vị trí địa lý

Bạn có thể truy cập API vị trí địa lý bằng cách gọi navigator.geolocation vật. Nó cấp cho ứng dụng quyền truy cập vào vị trí của thiết bị.

Đối tượng này cung cấp các phương thức được liệt kê bên dưới để làm việc với vị trí của thiết bị:

1. getCurrentPosition: Trả về vị trí hiện tại của thiết bị.
2. watchPosition: Chức năng xử lý được gọi tự động khi vị trí của thiết bị thay đổi.

Có ba đối số có thể xảy ra với các phương thức này:

• Gọi lại thành công (bắt buộc)
• Gọi lại lỗi (tùy chọn)
• Một đối tượng tùy chọn (tùy chọn)

Cách lấy vị trí người dùng với getCurrentPosition()

Bạn có thể dùng getCurrentPosition phương pháp để có được vị trí hiện tại của người dùng. Nó gửi một yêu cầu không đồng bộ tới trình duyệt, yêu cầu đồng ý chia sẻ vị trí của họ.

Đây là cú pháp để lấy vị trí của người dùng:

const successCallback = (position) => {
  console.log(position);
};

const errorCallback = (error) => {
  console.log(error);
};

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

Khi bạn chạy cái này, bạn sẽ nhận được một cửa sổ bật lên trong trình duyệt yêu cầu quyền:

Nhấp chuột Cho phépvà mở bảng điều khiển dành cho nhà phát triển. Bạn sẽ thấy rằng cuộc gọi thành công trả về hai điều:

1. GeolocationPosition.coords đối tượng: đại diện cho vị trí, độ cao và độ chính xác mà thiết bị tính toán các thuộc tính này.
2. timestamp: đại diện cho thời gian mà vị trí đã được nhận.

Bạn sẽ thấy một cái gì đó như thế này trong bảng điều khiển của mình:

GeolocationPosition {coords: GeolocationCoordinates, timestamp: 1662499816712}
    coords: GeolocationCoordinates
        accuracy: 7173.528443511279
        altitude: null
        altitudeAccuracy: null
        heading: null
        latitude: 6.5568768
        longitude: 3.3488896
        speed: null
        [[Prototype]]: GeolocationCoordinates
timestamp: 1662499816712

Với yêu cầu đơn giản này, chúng tôi đã có được vị trí thành công. Nhưng đó không phải là tất cả. Chúng tôi cũng có thể theo dõi người dùng bằng cách xem vị trí của họ.

Cách theo dõi vị trí người dùng với watchPosition()

Các watchPosition() cho phép ứng dụng liên tục theo dõi người dùng và được cập nhật khi vị trí của họ thay đổi. Nó thực hiện điều này bằng cách cài đặt một chức năng xử lý sẽ được gọi tự động bất cứ khi nào vị trí thiết bị của người dùng thay đổi.

Đây là cú pháp dưới đây, nơi id về cơ bản được sử dụng để quản lý hoặc tham chiếu phương thức:

const id = navigator.geolocation.watchPosition(successCallback, errorCallback);

Cách dừng theo dõi vị trí với clearWatch()

chúng tôi sử dụng clearWatch() phương pháp để hủy bỏ các chức năng xử lý đã được cài đặt trước đó bằng cách sử dụng watchPosition.

navigator.geolocation.clearWatch(id);

Làm thế nào để sử dụng options Vật

Mặc dù options đối tượng là tùy chọn, nó cung cấp các tham số có thể giúp bạn nhận được kết quả chính xác hơn, ví dụ:

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

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

Trong đoạn mã trên, chúng ta đã chỉ định trong đối tượng out options rằng:

• Phản hồi sẽ cung cấp một vị trí chính xác hơn, bằng cách đặt enableHighAccuracy thành true.
• Khoảng thời gian tối đa (tính bằng mili giây) mà thiết bị được phép thực hiện để trả về một vị trí. Trong trường hợp này, 10 giây.

kết thúc

Trong bài viết này, chúng ta đã tìm hiểu về JavaScript Geolocation API, cách sử dụng nó để lấy vị trí của người dùng và cũng theo dõi người dùng bằng phương thức watchPosition().

Bạn có thể tiến xa hơn để khám phá API này bằng cách xây dựng ứng dụng Thời tiết, Ứng dụng tìm kiếm hoặc ứng dụng Bản đồ. Cảm ơn vì đã đọc!