Geolokasi HTML5

Geolocation HTML5 digunakan untuk menglokasi lokasi pengguna.

Coba sendiri: Tampilkan lokasi Anda di peta Google

Menglokasi 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 peramban

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

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

HTML5 - Menggunakan geolokasi

Gunakan metode getCurrentPosition() untuk mendapatkan lokasi pengguna.

Contoh di bawah ini adalah contoh geolokasi yang 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 peramban ini.";}
  }
function showPosition(position)
  {
  x.innerHTML="Garis Lintang: " + position.coords.latitude +
  "<br />Garis Lintang: " + position.coords.longitude;
  }
</script>

Coba Sendiri

Penjelasan contoh:

  • Meng检测是否支持地理定位
  • Jika didukung, jalankan metode getCurrentPosition(). Jika tidak didukung, tampilkan pesan kepada pengguna.
  • Jika getCurrentPosition() berjalan sukses, maka akan mengembalikan objek koordinat ke fungsi yang ditentukan oleh 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 metode getCurrentPosition() digunakan untuk menangani kesalahan. Ini 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 - Pengguna tidak mengizinkan geolokasi
  • Lokasi tidak tersedia - Tidak dapat mengambil 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, kami menggunakan data garis bujur dan garis lintang yang kembali untuk menampilkan lokasi di peta Google (dengan gambar statis).

Skrip peta Google

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

Informasi lokasi yang diberikan

Halaman ini menunjukkan bagaimana menampilkan lokasi pengguna di peta. Namun, geolokasi sangat berguna untuk informasi 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 serta accuracy. Jika tersedia, akan mengembalikan atribut lain di bawah ini.

Atribut Deskripsi
coords.latitude Garis lintang desimal
coords.longitude Lintang desimal
coords.accuracy Ketepatan lokasi
coords.altitude Ketinggian, di atas permukaan laut dengan 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/Waktu Tanggap

Objek Geolocation - Metode lain yang menarik

watchPosition() - Mengembalikan lokasi saat ini pengguna, dan melanjutkan mengembalikan posisi pengguna saat 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 (seperti iPhone):

Contoh

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

Coba Sendiri