Pengukur Perjalanan Sederhana menggunakan API Geolokasi

Michael Mahemoff

Pengantar

Geolocation API memungkinkan Anda mengetahui lokasi pengguna dan memantau mereka saat berpindah-pindah, selalu dengan izin pengguna. Fungsi ini dapat digunakan sebagai bagian dari kueri pengguna, misalnya untuk memandu seseorang ke titik tujuan. API 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 bagaimana browser menentukan lokasi, selama klien dapat meminta dan menerima data lokasi dengan cara standar. Mekanisme yang mendasarinya mungkin melalui GPS, Wi-Fi, atau cukup meminta pengguna untuk 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 odometer yang menampilkan lokasi awal dan mempertahankan tampilan jarak yang telah ditempuh sejak halaman dimuat.

Langkah 1. Memeriksa 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 Trip Meter

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 diisi 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 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. Jika demikian, proses konfirmasi akan dilewati.

Setelah menjalankan kode ini, Anda kini dapat melihat posisi awal. Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih dari sekadar lintang dan bujur, misalnya, objek tersebut 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 yang bersifat 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 dieksekusi satu kali, saat pemuatan halaman. Untuk melacak perubahan, gunakan watchPosition(). Fungsi 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. Menampilkan Jarak yang Ditempuh

Langkah ini tidak terkait langsung dengan Geolocation API, tetapi melengkapi demo dan memberikan contoh cara 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;
}