Nhận vị trí người dùng bằng API sử dụng JavaScript

0 34

Các Javascript Định vị API cho phép một cách tiêu chuẩn để bạn có thể yêu cầu vị trí của người dùng. Vị trí này có thể được xác định bằng cách sử dụng GPS, WiFi hoặc định vị địa lý IP của chúng trên hầu hết các thiết bị. Bạn có thể sử dụng thông tin này cho một số thứ bao gồm trải nghiệm bản đồ phong phú, các tính năng xã hội tốt hơn và tích hợp với các dịch vụ của bên thứ ba.

Trong hướng dẫn này, chúng tôi sẽ làm quen với API vị trí địa lý của JavaScript, tìm hiểu cách sử dụng và yêu cầu người dùng cho vị trí của họ.

Làm thế nào là nó sống động khi GPS có sẵn miễn phí cho tất cả mọi người?

Nguồn địa điểm

Như đã đề cập trước đó, API vị trí địa lý sử dụng một số hoặc tất cả các phương pháp sau để xác định vị trí của người dùng, mỗi phương pháp có độ chính xác khác nhau. Dưới đây là các nguồn vị trí:

  • Hệ thống định vị toàn cầu (GPS): Phương pháp này có hiệu lực chủ yếu trên các thiết bị di động và là phương pháp chính xác nhất trong tất cả, một số điện thoại có thể chính xác trong vòng 1 feet hoặc 30 cm.
  • WiFi: Phương pháp này có sẵn cho hầu hết các thiết bị di động, ngay cả những thiết bị không có chip GPS bên trong. Phương pháp này chính xác trong khoảng 10 đến 100 mét, tùy thuộc vào vùng phủ sóng WiFi.
  • Định vị địa lý IP: Phương pháp này bị giới hạn bởi khu vực và là phương pháp ít chính xác nhất cho đến nay, do đó nó chỉ được sử dụng như một phương pháp cuối cùng để có được vị trí chung cho người dùng.

Trình duyệt sẽ cố gắng sử dụng bất kỳ hoặc cả ba phương pháp để đảm bảo vị trí chính xác nhất theo thời gian.

Sử dụng API vị trí địa lý

Điểm truy cập chính để sử dụng API vị trí địa lý là navigator.geolocationđối tượng được cung cấp . Trong đối tượng này, chúng ta có các phương thức sau mà chúng ta có thể sử dụng:

  • getCurrentPosition(): Điều này xác định vị trí hiện tại của người dùng. Điều này trả về một đối tượng chứa vĩ độ, kinh độ, độ chính xác tính bằng mét và nhiều bit thông tin khác.
  • watchPosition(): Điều này lắng nghe người dùng về bất kỳ thay đổi nào về vị trí. Sau đó, nó gọi một chức năng bất cứ khi nào vị trí thay đổi.
  • clearWatch(): Phương pháp này loại bỏ mọi trình xử lý được đính kèm trong watchPosition()cuộc gọi, do đó người dùng không còn bị theo dõi khi vị trí của họ thay đổi.

Tuy nhiên, trước khi chúng tôi có thể sử dụng bất kỳ thứ gì trong số này, chúng tôi cần phải xin phép người dùng. Hãy học cách làm điều đó.

Yêu cầu cấp phép người dùng

Bạn phải yêu cầu sự cho phép của người dùng để truy cập dữ liệu vị trí của họ vì đó là thông tin cá nhân rất nhạy cảm. Nếu người dùng tuyệt vời khi bạn đọc vị trí, thì họ sẽ làm rõ điều đó và bạn sẽ ổn. Tương tự, nếu người dùng của họ từ chối, ứng dụng của bạn sẽ không được cấp quyền truy cập vào thông tin vị trí của họ.

Để công bằng, trình duyệt sẽ tự động yêu cầu sự cho phép nhưng nếu người dùng từ chối, bạn sẽ phải xử lý điều đó theo logic ứng dụng của bạn.

Lấy vị trí người dùng

Tại thời điểm này, hy vọng người dùng đã chấp nhận yêu cầu của chúng tôi để truy cập vị trí của họ. Nếu vậy, bạn có thể chuyển sang thực sự có được dữ liệu đó. Đây là cách yêu cầu vị trí hiện tại của người dùng:

navigator.geolocation.getCurrentPosition(function(position) {

        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var altitude = position.coords.altitude;
        var accuracy = position.coords.accuracy;
        var altitudeAccuracy = position.coords.altitudeAccuracy;
        var heading = position.coords.height;
        var speed = position.coords.speed;
        var timestamp = position.timestamp;

        // work with this information however you'd like!
    });
	

Đó là nghĩa đen của nó. Bây giờ bạn có quyền truy cập vào vĩ độ, kinh độ, độ cao tính bằng mét so với mực nước biển, độ chính xác tính bằng mét, độ chính xác của độ cao tính bằng mét, hướng thiết bị di chuyển theo độ so với hướng bắc và tốc độ tính bằng mét môi giây.

Sử dụng watchPosition() là giống hệt  getCurrentPosition()!

Đừng quên rằng lỗi chắc chắn có thể xảy ra. Đây là một thiết lập tốt hơn để làm việc với API vị trí địa lý:

function locationSuccess(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var altitude = position.coords.altitude;
        var accuracy = position.coords.accuracy;
        var altitudeAccuracy = position.coords.altitudeAccuracy;
        var heading = position.coords.height;
        var speed = position.coords.speed;
        var timestamp = position.timestamp;

        // work with this information however you'd like!
    }

    function locationError(error) {
        var code = error.code;
        var message = error.message;

        // read the code and message and decide how you want to handle this!
    }

    navigator.geolocation.getCurrentPosition(locationSuccess, locationError);

Việc thiết lập tương tự có thể được thực hiện bằng cách sử dụng watchPosition().

Phần kết luận

Như bạn hy vọng đã thấy, làm việc với API vị trí địa lý là cực kỳ đơn giản. API đã trưởng thành qua nhiều năm, có hỗ trợ trình duyệt rộng rãi và đủ ổn định để sử dụng trong các ứng dụng của bạn. Hãy vui vẻ với tính năng thú vị này và sử dụng nó để cải thiện ứng dụng của bạn bất cứ nơi nào có thể áp dụng. Cảm ơn bạn đã đọc!