Geolocation API dalam Komponen React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) meminta lokasi perangkat satu kali. Fungsi panggilan balik keberhasilan menerima objek GeolocationPosition. Cara ini sesuai ketika Anda hanya memerlukan lokasi satu kali, misalnya untuk menemukan toko terdekat saat tombol diklik, bukan untuk melacak pergerakan yang terus berlangsung.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) terus memanggil fungsi panggilan balik setiap kali posisi perangkat berubah. Fungsi ini mengembalikan angka watchId. Cara ini sesuai untuk penggunaan waktu nyata, seperti pelacakan pengiriman atau navigasi petunjuk arah, ketika posisi harus selalu terbaru.

Objek GeolocationPosition berisi properti coords dengan latitude, longitude, dan accuracy (dalam meter). Kolom opsional tambahan mencakup altitude, altitudeAccuracy, heading, dan speed. Kolom timestamp mencatat kapan posisi tersebut diperoleh.

Fungsi panggilan balik kesalahan menerima GeolocationPositionError dengan properti code berupa angka. Kode 1 adalah PERMISSION_DENIED (pengguna menolak), kode 2 adalah POSITION_UNAVAILABLE (kegagalan perangkat keras atau jaringan), dan kode 3 adalah TIMEOUT (permintaan memerlukan waktu terlalu lama). Selalu tangani ketiga kasus tersebut.

Pendengar watchPosition berjalan tanpa batas sampai Anda menghentikannya. Di dalam useEffect, kembalikan fungsi pembersihan yang memanggil navigator.geolocation.clearWatch(watchId). Jika Anda melupakan pembersihan ini, pengawas akan terus berjalan setelah komponen dilepas, menguras baterai dan berpotensi memperbarui status komponen yang sudah dilepas.

Hook useGeolocation mengelola status dengan empat kemungkinan nilai: idle (belum diminta), loading (permintaan sedang diproses), success (posisi diterima), dan error (gagal). Hook ini juga menyimpan position dan errorMessage dalam status. Komponen menerima antarmuka yang bersih dan konsisten.

Ketika pengguna menolak geolokasi, tampilkan pesan yang membantu dengan menjelaskan alasan fitur memerlukan akses lokasi dan cara mengaktifkannya kembali di pengaturan peramban. Jangan pernah menampilkan kode kesalahan mentah kepada pengguna. Sediakan alternatif masukan alamat manual agar fitur tetap dapat digunakan tanpa izin lokasi.

Seperti kebanyakan API peramban yang memiliki kemampuan khusus, geolokasi dibatasi pada konteks aman. navigator.geolocation bernilai undefined pada halaman HTTP biasa. Selama pengembangan di localhost, geolokasi dapat digunakan tanpa HTTPS. Dalam produksi, selalu pastikan aplikasi Anda disajikan melalui HTTPS, atau pengguna tidak akan pernah dimintai izin.

Argumen ketiga opsional untuk getCurrentPosition dan watchPosition menerima objek opsi. enableHighAccuracy: true meminta ketelitian setara GPS dengan konsekuensi penggunaan daya yang lebih besar. timeout menetapkan jumlah milidetik maksimum untuk menunggu. maximumAge mengizinkan penggunaan posisi tersimpan jika posisi tersebut diperoleh dalam jumlah milidetik yang ditentukan.

Geolokasi memungkinkan fitur seperti "temukan toko di dekat saya", pelacakan pengantar barang di peta, cuaca berdasarkan kota saat ini, kiriman yang diberi tag lokasi, dan penghitungan jarak antara pengguna dan tujuan. Selalu jelaskan dengan terang kepada pengguna alasan aplikasi memerlukan lokasi mereka sebelum meminta izin.

Chrome DevTools memungkinkan Anda menetapkan lokasi perangkat palsu. Buka DevTools, buka menu tiga titik, pilih Alat lainnya, lalu Sensor. Anda dapat mengetik koordinat lintang dan bujur untuk menyimulasikan lokasi mana pun. Cara ini jauh lebih cepat daripada bepergian secara fisik untuk menguji fitur yang bergantung pada lokasi.

Apa arti kode GeolocationPositionError bernilai 1?

Gunakan getCurrentPosition untuk pembacaan satu kali dan watchPosition untuk pelacakan berkelanjutan. Selalu panggil clearWatch dalam pembersihan useEffect. Buat hook useGeolocation dengan status idle, loading, success, dan error. Tangani penolakan izin dengan baik dan ingat bahwa geolokasi memerlukan HTTPS dalam produksi.