Geolokasi HTML5

HTML5 Geolocation (geolokasi) digunakan untuk menentukan lokasi pengguna

Coba sendiri: Tampilkan lokasi Anda di Google Maps

Menentukan lokasi pengguna

API Geolocation HTML5 digunakan untuk mendapatkan lokasi geografis pengguna

Karena fitur ini dapat melanggar privasi pengguna, informasi lokasi pengguna tidak tersedia kecuali pengguna menyetujui

Dukungan browser

Internet Explorer 9, Firefox, Chrome, Safari, dan Opera mendukung geolokasi

Catatan:Untuk perangkat yang memiliki GPS seperti iPhone, geolokasi lebih akurat

HTML5 - Penggunaan Geolokasi

Gunakan metode getCurrentPosition() untuk mendapatkan lokasi pengguna

Contoh di bawah ini adalah contoh geolokasi sederhana yang dapat mengembalikan garis bujur dan garis lintang lokasi pengguna

Contoh

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

Coba Sendiri

Pengertian contoh:

  • Deteksi apakah geolokasi didukung
  • Jika didukung, jalankan metode getCurrentPosition(). Jika tidak didukung, tampilkan pesan kepada pengguna
  • Jika getCurrentPosition() berjalan sukses, maka mengembalikan objek koordinat kepada fungsi yang ditentukan parameter showPosition
  • Fungsi showPosition() mendapatkan dan menampilkan garis bujur dan garis lintang

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

Menangani kesalahan dan penolakan

Parameter kedua dari metode getCurrentPosition() digunakan untuk menangani kesalahan. Ia menentukan fungsi yang akan dijalankan saat pengambilan lokasi pengguna gagal:

Contoh

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Pengguna menolak permintaan Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Lokasi informasi tidak tersedia."
      break;
    case error.TIMEOUT:
      x.innerHTML="Permintaan untuk mendapatkan lokasi pengguna melebihi batas waktu."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Terjadi kesalahan yang tak dikenal."
      break;
    }
  }

Coba Sendiri

Kode kesalahan:

  • Izinkan dilarang - Pengguna tidak mengizinkan geolokasi
  • Lokasi tidak tersedia - Tidak dapat mendapatkan lokasi saat ini
  • Timeout - Operasi melebihi batas waktu

Menampilkan hasil di peta

Untuk menampilkan hasil di peta, Anda perlu mengakses layanan peta yang dapat digunakan dengan garis bujur dan garis lintang, seperti Google Maps atau Baidu Maps:

Contoh

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Coba Sendiri

Dalam contoh di atas, kita menggunakan data garis bujur dan garis lintang yang kembali untuk menampilkan lokasi di peta Google (dengan gambar statis).

Skrip peta Google

Tautan di atas menunjukkan bagaimana menggunakan skrip untuk menampilkan peta interaktif dengan opsi tanda, skala, dan geser.

Informasi tentang lokasi yang diberikan

Halaman ini menunjukkan bagaimana menampilkan lokasi pengguna di peta. Namun, geolokasi sangat berguna untuk informasi tentang lokasi yang diberikan.

Kasus:

  • Memperbarui informasi lokal
  • Menampilkan titik minat sekitar pengguna
  • Sistem navigasi mobil interaktif (GPS)

Metode getCurrentPosition() - Mengembalikan data

Jika sukses, metode getCurrentPosition() mengembalikan objek. Selalu akan mengembalikan atribut latitude, longitude, dan accuracy. Jika tersedia, akan mengembalikan atribut lain di bawah ini.

Atribut Deskripsi
coords.latitude Garis lintang dalam sistem desimal
coords.longitude Garis bujur dalam sistem desimal
coords.accuracy Ketepatan lokasi
coords.altitude Ketinggian, di atas permukaan laut dalam satuan meter
coords.altitudeAccuracy Akurasi ketinggian lokasi
coords.heading Arah, dihitung dalam derajat dari arah utara
coords.speed Kecepatan, dihitung dalam meter per detik
timestamp Tanggal dan Waktu Tanggap

Objek Geolocation - Metode yang Menarik Lainnya

watchPosition() - Mengembalikan lokasi saat ini pengguna, dan terus mengembalikan update lokasi pengguna saat pengguna bergerak (seperti GPS di mobil).

clearWatch() - Berhenti metode watchPosition()

Contoh di bawah ini menunjukkan metode watchPosition(). Anda memerlukan perangkat GPS yang akurat untuk menguji contoh ini (contoh: iPhone):

Contoh

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

Coba Sendiri