Geolokasi HTML5

HTML5 Geolokasi digunakan untuk menentukan lokasi pengguna.

Coba sendiri: Tampilkan lokasi anda di Peta Google

Menentukan lokasi pengguna

API Geolokasi HTML5 digunakan untuk mendapatkan lokasi geografi pengguna.

Karena fitur ini dapat melanggar privasi pengguna, maklumat lokasi pengguna tidak tersedia kecuali pengguna setuju.

Dukungan pereksa

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

Komen:Untuk peralatan yang memiliki GPS seperti iPhone, geolokasi lebih tepat.

HTML5 - Penggunaan Geolokasi

Gunakan metode getCurrentPosition() untuk mendapatkan lokasi pengguna.

Contoh di bawah 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 is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Garis Lintang: " + position.coords.latitude +
  "<br />Garis Lintang: " + position.coords.longitude;
  }
</script>

Coba Sendiri

Pengertian contoh:

  • Pengesanan apakah didukung geolokasi
  • Jika didukung, jalankan metode getCurrentPosition(). Jika tidak didukung, tampilkan pesan kepada pengguna.
  • Jika getCurrentPosition() berjalan dengan 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 dasar yang tidak termasuk pengelolaan kesalahan.

Mengelola kesalahan dan penolakan

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

Contoh

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

Coba Sendiri

Kode kesalahan:

  • Izinkan - pengguna tidak mengizinkan geolokasi
  • Lokasi tidak tersedia - Tidak dapat mendapatkan lokasi saat ini
  • Timeout - operasi melebihi masa

Memaparkan hasil di peta

Untuk memaparkan hasil di peta, anda perlu mengakses layanan peta yang dapat digunakan dengan garis bujur dan garis lintang, seperti peta Google 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 diembalikan untuk memaparkan lokasi di peta Google (menggunakan gambar statis).

Skrip peta Google

Link di atas memperlihatkan bagaimana menggunakan skrip untuk memaparkan peta interaktif dengan pilihan tanda, skala, dan geser.

Informasi lokasi yang diberikan

Halaman ini memperlihatkan bagaimana memaparkan lokasi pengguna di peta. Walau bagaimanapun, geolokasi untuk informasi lokasi yang diberikan sangat berguna.

Kasus:

  • Perbarui informasi tempatan
  • Tunjukkan objek minat pengguna di sekeliling pengguna
  • Sistem navigasi kereta berasal (GPS)

Metod getCurrentPosition() - Mengembalikan data

Jika berjaya, maka metod getCurrentPosition() mengembalikan objek. Semua masa akan mengembalikan atribut latitude, longitude serta ketepatan. Jika tersedia, akan mengembalikan atribut lain di bawah ini.

aturan deskripsi
coords.latitude garis lintang dalam sistem desimal
coords.longitude garis bujur dalam sistem desimal
coords.accuracy ketepatan lokasi
coords.altitude kedalaman, di atas permukaan laut dalam satuan meter
coords.altitudeAccuracy Kepastian ketinggian lokasi
coords.heading Arah, mulai dari utara utara dalam satuan derajat
coords.speed Kecepatan, dalam satuan meter per detik
timestamp Tanggal dan Waktu Tanggap

Objek Geolocation - Metode lain yang menarik

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

clearWatch() - Berhenti metode watchPosition()

Contoh di bawah ini menunjukkan metode watchPosition(). Anda memerlukan perangkat GPS yang tepat 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 is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Garis Lintang: " + position.coords.latitude +
  "<br />Garis Lintang: " + position.coords.longitude;
  }
</script>

Coba Sendiri