Pengukur perjalanan sederhana menggunakan Geolocation API

Michael Mahemoff

Pengantar

Geolocation API memungkinkan Anda mengetahui lokasi pengguna dan terus memantau mereka saat mereka berpindah, selalu dengan izin pengguna. Fungsi ini dapat digunakan sebagai bagian dari kueri pengguna, misalnya untuk memandu seseorang ke titik tujuan. Izin ini juga dapat digunakan untuk "pemberian geotag" pada beberapa konten yang telah dibuat pengguna, misalnya untuk menandai tempat pengambilan foto. API ini tidak bergantung pada perangkat; API ini tidak peduli bagaimana browser menentukan lokasi, asalkan klien dapat meminta dan menerima data lokasi dengan cara standar. Mekanisme yang mendasarinya mungkin melalui GPS, Wi-Fi, atau cukup meminta pengguna memasukkan lokasinya secara manual. Karena pencarian ini akan memerlukan waktu, API bersifat asinkron; Anda meneruskan metode callback setiap kali meminta lokasi.

Contoh di sini adalah meteran perjalanan yang menampilkan lokasi awal dan mempertahankan tampilan jarak yang telah ditempuh sejak halaman dimuat.

Langkah 1. Memeriksa kompatibilitas

Browser Support

• 5
• 12
• 3.5
• 5

Source

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 akan 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 fungsi ini segera setelah halaman dimuat, sehingga fungsi ini akan mengisi dengan benar - dan menyimpan untuk nanti - posisi awal:

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 di domain ini meminta izin, browser biasanya akan memeriksa izin pengguna. Bergantung pada browser, mungkin juga ada preferensi untuk selalu mengizinkan - atau tidak mengizinkan - pencarian izin, sehingga proses konfirmasi akan dilewati.

Setelah menjalankan kode ini, Anda akan 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 menjelajahi 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(). API ini akan otomatis memberi tahu fungsi callback setiap kali pengguna bergerak:

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 melengkapi demo dan memberikan contoh 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;
}