Geolokasi HTML5

HTML5 Penggunaan Lokasi Geografi (lokasi geografi) untuk mengemaskan lokasi pengguna.

Cuba sendiri: Tunjukkan lokasi anda di peta Google

Mengemaskan lokasi pengguna

API Penggunaan Lokasi HTML5 untuk mendapatkan lokasi geografi pengguna.

Sebagai ciri yang boleh melanggar privasi pengguna, maklumat lokasi pengguna adalah tidak tersedia kecuali pengguna setuju.

Sokongan pelayar

Internet Explorer 9, Firefox, Chrome, Safari dan Opera menyokong penggunaan lokasi geografi.

Catatan:Untuk peranti yang mempunyai GPS seperti iPhone, lokasi geografi lebih tepat.

HTML5 -guna penggunaan lokasi geografi

Guna metode getCurrentPosition() untuk mendapatkan lokasi pengguna.

Contoh di bawah adalah contoh penggunaan lokasi geografi yang mudah, yang boleh mengembalikan garis lintang dan garis bujur 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="Garis Lintang: " + position.coords.latitude +
  "<br />Garis Bujur: " + position.coords.longitude;
  }
</script>

Coba Sendiri

Pengertian contoh:

  • Pemeriksaan sama ada disokongkan penggunaan lokasi geografi
  • Jika disokong, lakukan fungsi getCurrentPosition(). Jika tidak disokong, tunjukkan mesej kepada pengguna
  • Jika fungsi getCurrentPosition() berjaya berlaku, ia akan mengembalikan objek koordinat kepada fungsi yang ditetapkan oleh parameter showPosition
  • Fungsi showPosition() mendapatkan dan menunjukkan garis lintang dan garis bujur

Contoh di atas adalah skrip lokasi geografi yang sangat dasar, tanpa pemprosesan kesalahan.

Pemprosesan kesalahan dan penolakan

Penggunaan parameter kedua bagi fungsi getCurrentPosition() digunakan untuk mengendalikan kesalahan. Ia menentukan fungsi yang akan dijalankan apabila 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="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

Coba Sendiri

Kode kesalahan:

  • Izinkan - 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 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 dikembalikan untuk menampilkan lokasi di peta Google (dengan gambar statis).

Skrip peta Google

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

Informasi lokasi yang diberikan

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

Kasus:

  • Memperbarui informasi lokal
  • Menampilkan poin minat sekitar pengguna
  • Sistem pelayaran kendaraan interaktif (GPS)

Method getCurrentPosition() - Mengembalikan data

Jika sukses, maka method getCurrentPosition() mengembalikan objek. Secara permanen akan mengembalikan properti latitude, longitude serta ketelitian. Jika tersedia, maka akan mengembalikan properti di bawah ini.

Property Description
coords.latitude Garis lintang bersumber desimal
coords.longitude Garis bujur bersumber desimal
coords.accuracy Ketelitian lokasi
coords.altitude Altitude, di atas parasut laut dinyatakan dalam meter
coords.altitudeAccuracy Ketinggian 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 pembaruan 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 (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 browser ini.";}
  }
function showPosition(position)
  {
  x.innerHTML="Garis Lintang: " + position.coords.latitude +
  "<br />Garis Bujur: " + position.coords.longitude;
  }
</script>

Coba Sendiri