Sử dụng API vị trí địa lý
API vị trí địa lý là một API rất đơn giản cho phép lấy tọa độ vị trí hiện tại của thiết bị. Nó chỉ có hai phương pháp: getCurrentPosition và watchPosition và dữ liệu trả về là rất đơn giản, nhưng khi kết hợp với một API lập bản đồ, nhận biết vị trí các ứng dụng web phức tạp có thể được tạo ra.
Cài đặt
Trước khi làm bất cứ điều gì, bạn cần kiểm tra xem API có sẵn trong trình duyệt của user hay không:
if (navigator.geolocation) { // 🗺️ yep, we can proceed! } else { // no can do } Lưu ý trang web hoặc ứng dụng của bạn phải được cung cấp qua https để API hoạt động. Để phát triển local , bạn cần chạy một server local thay vì mở trực tiếp file html. Nếu bạn có npm 5.2 trở lên trên máy của bạn , bạn có thể sử dụng npx để chạy nhanh server http:
$ npx http-server getCurrentPosition
Sử dụng phương thức getCurrentPosition để lấy tọa độ của user một lần. Đối số bắt buộc đầu tiên và duy nhất phải là một hàm gọi lại thành công sẽ được gọi với một đối tượng vị trí nếu yêu cầu vị trí thành công.
Dưới đây là một ví dụ đơn giản in ra kinh độ và vĩ độ của thiết bị ra console :
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(displayLocationInfo); } function displayLocationInfo(position) { const lng = position.coords.longitude; const lat = position.coords.latitude; console.log(`longitude: ${ lng } | latitude: ${ lat }`); } Dưới đây là dữ liệu hình dạng và ví dụ của đối tượng vị trí được chuyển đến lệnh gọi lại thành công:
coords: accuracy: 52 altitude: null altitudeAccuracy: null heading: null latitude: 27.380583 longitude: 33.631839 speed: null timestamp: 1509152059444 Như bạn thấy từ ví dụ trên, một số thuộc tính cho coords có thể có giá trị null . Tính khả dụng của dữ liệu sẽ phụ thuộc vào khả năng của thiết bị đang được sử dụng. Giá trị đề mục, nếu có, sẽ tính bằng độ liên quan đến hướng Bắc thực và đi theo chiều kim đồng hồ và giá trị tốc độ, nếu có, sẽ tính bằng mét trên giây.
Sự cho phép
Bởi vì thông tin vị trí có thể nhạy cảm, lần đầu tiên một domain gọi điện để có được vị trí của user , trình duyệt sẽ yêu cầu user cho phép bằng cách hiển thị một tiện ích trông giống như sau:
Nếu user từ chối quyền truy cập, lệnh gọi lại lỗi, nếu có, sẽ được gọi với mã lỗi là 1 ( PERMISSION_DENIED ).
watchPosition
Ngoài ra còn có một phương thức watchPosition sẽ trả về dữ liệu vị trí mới mỗi khi thiết bị thay đổi đáng kể vị trí.
Trong ví dụ sau, ta bắt đầu một trình theo dõi vị trí và sau đó dừng nó sau 15 giây:
const watcher = navigator.geolocation.watchPosition(displayLocationInfo); setTimeout(() => { navigator.geolocation.clearWatch(watcher); }, 15000); function displayLocationInfo(position) { // ...do something with the data each time } Ta sử dụng clearWatch với id người theo dõi để ngừng theo dõi dữ liệu vị trí.
Xử lý lỗi
Bạn có thể cung cấp một callback handler lỗi như là đối số thứ hai để một trong hai getCurrentPosition hoặc watchPosition. Nếu gọi lại lỗi được gọi, một đối tượng lỗi sẽ được chuyển vào và sẽ chứa thuộc tính mã sẽ có giá trị là 3 ( TIMEOUT ), 2 ( POSITION_UNAVAILABLE ) hoặc 1 ( PERMISSION_DENIED ), tùy thuộc vào bản chất của lỗi.
Dưới đây là một ví dụ đơn giản trong đó ta kích hoạt lỗi tự động bằng cách đặt giá trị thời gian chờ là 0ms:
navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError, { timeout: 0 }); function displayLocationInfo(position) { // ...do stuff } function handleLocationError(error) { switch (error.code) { case 3: // ...deal with timeout break; case 2: // ...device can't get data break; case 1: // ...user said no ☹️ } } Tùy chọn
Cuối cùng, bạn có thể chuyển đối số thứ ba với các tùy chọn cho những điều sau:
- enableHighAccuracy : Lấy giá trị boolean và mặc định là false. Cho biết liệu thông tin vị trí có càng chính xác càng tốt (chính xác hơn có thể tốn kém hơn về mức sử dụng CPU và pin).
- maxAge : Số mili giây để lưu dữ liệu vị trí vào bộ nhớ đệm. Nó được mặc định là giá trị 0.
- timeout : Số mili giây sau đó lệnh gọi lại lỗi sẽ được gọi nếu không có dữ liệu nào được lấy.
Dưới đây là một ví dụ với các tùy chọn được chuyển vào cho MaximumAge và timeout :
navigator.geolocation.getCurrentPosition( displayLocationInfo, handleLocationError, { maximumAge: 1500000, timeout: 0 } ); function displayLocationInfo(position) { const lng = position.coords.longitude; const lat = position.coords.latitude; console.log(`longitude: ${lng} | latitude: ${lat}`); } function handleLocationError(error) { switch (error.code) { case 3: // timeout was hit, meaning nothing's in the cache // let's provide a default location: displayLocationInfo({ coords: { longitude: 33.631839, latitude: 27.380583 } }); // now let's make a non-cached request to get the actual position navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError); break; case 2: // ... break; case 1: // ... } } Nếu có sẵn dữ liệu vị trí đã lưu trong bộ nhớ cache và đó là dữ liệu tối đa là 25 phút (1500000 mili giây), ta sẽ trả lại dữ liệu đó. Nếu không, ta sẽ lỗi ngay lập tức (sử dụng thời gian chờ là 0ms ). Trong trường hợp xử lý lỗi cho thời gian chờ, ta cung cấp một giá trị vị trí mặc định và sau đó thực hiện một cuộc gọi khác để nhận dữ liệu vị trí mới. Bằng cách này, ứng dụng có thể tránh hiển thị trạng thái trống trong khi dữ liệu vị trí mới đang được thu thập.
Hỗ trợ trình duyệt
Tôi có thể sử dụng định vị địa lý không? Dữ liệu về hỗ trợ tính năng định vị trên các trình duyệt chính từ caniuse.com.
Các tin liên quan
