Javascript

API Geolokasi Web: Cara Membuat dan Codenya

Temukan Posisi Pengguna

API Geolokasi HTML digunakan untuk mendapatkan posisi geografis pengguna.

Karena ini dapat membahayakan privasi, posisi tidak akan tersedia kecuali pengguna menyetujuinya.

Catatan: Geolokasi paling akurat untuk perangkat dengan GPS, seperti smartphone.

API Geolokasi didukung di semua browser:

ChromeEdgeFirefoxSafariOpera
YaYaYaYaYa

Catatan: Mulai Chrome 50, Geolocation API hanya akan bekerja pada konteks aman seperti HTTPS. Jika situs dihosting pada tempat yang tidak aman (seperti HTTP), permintaan untuk mendapatkan lokasi pengguna tidak akan berfungsi lagi.

Menggunakan API Geolokasi

Metode getCurrentPosition() digunakan untuk mengembalikan posisi pengguna.

Contoh di bawah menampilkan garis lintang dan bujur dari posisi pengguna.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Klik tombol untuk mendapatkan koordinat Anda.</p>
<button >var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

Penjelasan contoh:

  • Periksa apakah Geolocation didukung
  • Jika didukung, jalankan metode getCurrentPosition(). Jika tidak, tampilkan pesan kepada pengguna
  • Jika metode getCurrentPosition() berhasil, ia mengembalikan objek koordinat ke fungsi yang ditentukan dalam parameter (showPosition)
  • Fungsi showPosition() mengeluarkan Latitude dan Longitude

Contoh di atas adalah skrip Geolokasi yang sangat mendasar, tanpa penanganan error.

Menangani Kesalahan dan Penolakan

Parameter kedua dari metode getCurrentPosition() digunakan untuk menangani kesalahan. Ini menentukan fungsi apa yang dijalankan jika gagal mendapatkan lokasi pengguna.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Klik tombol untuk mendapatkan koordinat Anda.</p>
<button >switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Menampilkan Hasil pada Map

Untuk menampilkan hasil pada map, maka memerlukan akses ke layanan map seperti Google Maps.

Pada contoh di bawah ini, garis lintang dan bujur yang dikembalikan digunakan untuk menunjukkan lokasi di Google Map (menggunakan gambar statis).

Contoh:

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Informasi spesifik lokasi

Tutorial kali ini telah mendemonstrasikan bagaimana menampilkan posisi pengguna pada map.

Geolokasi juga sangat berguna untuk informasi spesifik lokasi, seperti:

  • Informasi lokal terkini
  • Menampilkan Tempat Menarik di dekat pengguna
  • Navigasi belokan demi belokan (GPS)

Metode getCurrentPosition() – Mengembalikan Data

Metode getCurrentPosition() mengembalikan objek saat berhasil. Properti lintang, bujur, dan akurasi selalu dikembalikan. Properti lainnya dikembalikan jika tersedia:

PropertiReturn
coords.latitudeGaris lintang sebagai angka desimal (selalu dikembalikan)
coords.longitudeBujur sebagai angka desimal (selalu dikembalikan)
coords.accuracyAkurasi posisi (selalu dikembalikan)
coords.altitudeKetinggian dalam meter di atas permukaan laut rata-rata (dikembalikan jika tersedia)
coords.altitudeAccuracyAkurasi ketinggian posisi (dikembalikan jika tersedia)
coords.headingJudul dalam derajat searah jarum jam dari Utara (dikembalikan jika tersedia)
coords.speedAkurasi ketinggian posisi (dikembalikan jika tersedia)…
timestampTanggal / waktu tanggapan (dikembalikan jika tersedia)

Objek Geolokasi – Metode menarik lainnya

Objek Geolocation juga memiliki metode menarik lainnya, contoh:

  • watchPosition() – Mengembalikan posisi pengguna saat ini dan terus mengembalikan posisi yang diperbarui saat pengguna bergerak (seperti GPS di dalam mobil).
  • clearWatch() – Menghentikan metode watchPosition ().

Contoh di bawah ini menunjukkan metode watchPosition(). Anda memerlukan perangkat GPS yang akurat untuk mengujinya (seperti smartphone):

<!DOCTYPE html>
<html>
<body>

<p>Klik tombol untuk mendapatkan koordinat Anda.</p>
<button >

Catur Kurnia Sari

Share
Tags: Geolokasijavascript