Pengantar
Geolocation API memungkinkan Anda mencari tahu di mana pengguna berada dan mengikutinya saat mereka bergerak, selalu dengan persetujuan pengguna. Fungsi ini dapat digunakan sebagai bagian dari kueri pengguna, misalnya untuk memandu seseorang ke titik tujuan. Fitur ini juga dapat digunakan untuk "pemberian tag geografis" pada beberapa konten yang telah dibuat pengguna, misalnya untuk menandai tempat foto diambil. API ini tidak bergantung pada perangkat; API ini tidak peduli dengan cara browser menentukan lokasi, selama klien dapat meminta dan menerima data lokasi dengan cara standar. Mekanisme pokoknya mungkin melalui GPS, Wi-Fi, atau cukup meminta pengguna memasukkan lokasi mereka secara manual. Karena setiap pencarian ini akan memakan waktu, API bersifat asinkron; Anda meneruskan metode callback setiap kali meminta lokasi.
Contoh di sini adalah pengukur perjalanan yang menampilkan lokasi awal dan mempertahankan tampilan jarak yang telah mereka tempuh sejak halaman dimuat.
Langkah 1. Periksa Kompatibilitas
Anda dapat dengan mudah memeriksa kompatibilitas dengan menguji keberadaan objek geolokasi:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
}
else {
console.log('Geolocation is not supported for this Browser/OS version yet.');
}
Langkah 2: Mendeklarasikan HTML Pengukur Perjalanan
Dalam contoh ini, Anda membuat pengukur perjalanan, jadi deklarasikan HTML berikut:
<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>
Beberapa langkah berikutnya akan menggunakan Geolocation API untuk mengisi semua span kosong tersebut.
Langkah 3. Menentukan Lokasi Pengguna Saat Ini
getCurrentPosition() akan melaporkan lokasi pengguna saat ini secara asinkron. Panggil segera setelah halaman dimuat, sehingga posisi awal akan terisi dengan benar - dan disimpan untuk nanti -:
window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};
Jika ini adalah pertama kalinya aplikasi pada domain ini meminta izin, browser biasanya akan memeriksa izin pengguna. Bergantung pada browser, mungkin juga terdapat preferensi untuk selalu mengizinkan atau melarang - pencarian izin, sehingga proses konfirmasi akan diabaikan.
Setelah menjalankan kode ini, Anda sekarang dapat melihat posisi awal. Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih dari sekadar lintang dan bujur, misalnya dapat mencakup ketinggian atau arah. Anda dapat mempelajari lebih lanjut dengan mencatat variabel posisi ke konsol.
Langkah 4. Menangani Error
Sayangnya, tidak semua pencarian lokasi berhasil. Mungkin GPS tidak dapat ditemukan atau
pengguna tiba-tiba menonaktifkan pencarian lokasi. Argumen kedua opsional untuk getCurrentPosition()
akan dipanggil jika terjadi error, sehingga Anda dapat memberi tahu pengguna di dalam callback:
window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from locaton provider)
// 3: timed out
});
};
Langkah 5. Memantau Lokasi Pengguna
Panggilan sebelumnya ke getCurrentPosition() hanya dijalankan sekali, saat pemuatan halaman. Untuk melacak perubahan,
gunakan watchPosition(). Ini akan otomatis memberi tahu fungsi callback setiap kali pengguna berpindah:
navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Langkah 6. Tampilkan Jarak yang Ditempuh
Langkah ini tidak terkait langsung dengan Geolocation API, tetapi membulatkan demo dan memberikan
contoh tentang cara Anda dapat menggunakan data lokasi. Tambahkan baris tambahan ke pengendali watchPosition() untuk mengisi jarak yang ditempuh:
navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
position.coords.latitude, position.coords.longitude);
});
Fungsi calculateDistance() menjalankan algoritma geometris untuk menentukan
jarak antara dua koordinat. Implementasi JavaScript diadaptasi dari skrip yang disediakan oleh Moveable Type
berdasarkan lisensi Creative Commons:
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}