API Geolokasi Web

Menentukan lokasi pengguna

HTML Geolocation API digunakan untuk mendapatkan lokasi pengguna.

Karena hal ini dapat mengena privasi, kecuali pengguna menyetujui, lokasi tidak tersedia.

Coba Sendiri

Keterangan:Geolokasi paling akurat untuk perangkat yang memiliki GPS (seperti ponsel pintar)

Semua browser mendukung API Geolocation:

Chrome IE Firefox Safari Opera
Didukung Didukung Didukung Didukung Didukung

Keterangan:Dari Chrome 50, API Geolocation hanya akan berlaku untuk konteks yang aman, seperti HTTPS. Jika situs Anda berada di sumber yang tidak aman (contoh HTTP), permintaan untuk mendapatkan lokasi pengguna akan berhenti berfungsi.

Pergunakan API Geolocation

getCurrentPosition() Metode digunakan untuk mengembalikan lokasi pengguna.

Contoh di bawah ini mengembalikan lintang dan bujur lokasi pengguna:

Contoh

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolokasi tidak didukung oleh browser ini.";
  }
}
function showPosition(position) {
  x.innerHTML = "Lintang: " + position.coords.latitude +
  "<br>Lintang: " + position.coords.longitude;
}
</script>

Coba Sendiri

Pengertian contoh:

  1. Periksa apakah Geolocation didukung
  2. Jika metode getCurrentPosition() didukung, jalankan metode tersebut. Jika tidak, tampilkan pesan kepada pengguna
  3. Jika metode getCurrentPosition() berhasil, objek koordinat akan kembalikan kepada fungsi yang ditentukan di parameter (showPosition)
  4. Fungsi showPosition() menampilkan lintang dan bujur

Contoh di atas adalah skrip geolokasi yang sangat dasar, tanpa penanganan kesalahan.

Menangani kesalahan dan penolakan

getCurrentPosition() Parameter kedua metode digunakan untuk menangani kesalahan. Jika lokasi pengguna tidak dapat diambil, fungsi yang ditentukan akan dijalankan:

Contoh

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Pengguna menolak permintaan Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Informasi lokasi tidak tersedia."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Permintaan untuk mendapatkan lokasi pengguna habis masa tunggu."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Sebuah kesalahan yang tak dikenal terjadi."
      break;
  }
}

Coba Sendiri

Menampilkan hasil di peta

Untuk menampilkan hasil di peta, Anda perlu mengakses layanan peta, seperti Google Peta.

Dalam contoh di bawah, lintang dan garis bujur yang dikembalikan digunakan untuk menampilkan lokasi di Google Maps (dengan gambar statis):

Contoh

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let 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 khusus lokasi

Halaman ini menunjukkan bagaimana menampilkan lokasi pengguna di peta.

Geolocation sangat bermanfaat untuk informasi khusus lokasi, seperti:

  • Informasi lokal yang paling baru
  • Tampilkan titik minat dekat pengguna
  • Navigasi berputar-putar (Turn-by-turn navigation) (GPS)

Metode getCurrentPosition() - Mengembalikan data

getCurrentPosition() metode kembalikan sebuah objek saat sukses. Semua mengembalikan aturan garis bujur, lintang, dan akurasi. Jika tersedia, kembalikan aturan lainnya:

aturan kembalikan
coords.latitude garis bujur (dinyatakan dalam bilangan desimal, selalu kembalikan)
coords.longitude lintang (dinyatakan dalam bilangan desimal, selalu kembalikan)
coords.accuracy akurasi lokasi (selalu kembalikan)
coords.altitude tinggi di atas permukaan laut rata-rata (dinyatakan dalam meter, jika tersedia, kembalikan)
coords.altitudeAccuracy akurasi tinggi lokasi (jika tersedia, kembalikan)
coords.heading arah penerbangan seputar arah utara (jika tersedia, kembalikan)
coords.speed kecepatan (dinyatakan dalam meter/detik, jika tersedia, kembalikan)
timestamp tanggal/waktu yang berhubungan dengan tanggapannya (jika tersedia, kembalikan)

Objek Geolocation - Metode menarik lainnya

Objek Geolocation juga memiliki metode yang menarik lainnya:

  • watchPosition() - Kembalikan lokasi saat ini pengguna, dan terus mengembalikan lokasi yang diperbarui dengan pergerakan pengguna (seperti GPS di mobil)
  • clearWatch() - Berhenti metode watchPosition ()

Contoh di bawah ini menunjukkan watchPosition() Metode. Anda memerlukan perangkat GPS yang akurat untuk menguji (seperti ponsel cerdas):

Contoh

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolokasi tidak didukung oleh browser ini.";
  }
}
function showPosition(position) {
  x.innerHTML = "Lintang: " + position.coords.latitude +
  "<br>Lintang: " + position.coords.longitude;
}
</script>

Coba Sendiri