Temukan Lokasi Posisi Pengguna
HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.Hal seperti ini bisa menjadi sebuah kompromi privasi, posisi tidak tersedia kecuali jika pengguna menyetujuinya.
Catatan: Geolocation paling akurat untuk perangkat dengan GPS, seperti smartPhone.
Dukungan Browser
Angka-angka dalam tabel berikut menspesifikasikan versi pertama browser yang mendukung sepenuhnya Geolocation.| API | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Catatan: Pada Chrome 50, API Geolocation hanya akan bekerja pada konteks yang aman seperti HTTPS. Jika situs kita di-host yang tidak aman (seperti HTTP) permintaan untuk mendapatkan lokasi pengguna tidak akan lagi berfungsi.
Menggunakan Geolocation HTML
Method getCurrentPosition () digunakan untuk mengembalikan posisi pengguna.Lihat hasil uji geolocation html5 : https://www.purwana.net/2017/12/geolocation-di-html5.html .
Contoh di bawah ini mengembalikan lintang (latitude) dan bujur (longitude) dari posisi 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 = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Contoh tsb menjelaskan:
- Periksa apakah fitur Geolocation didukung
- Jika didukung, menjalankan method getCurrentPosition(). Jika tidak, tampilkan pesan ke pengguna.
- Jika method getCurrentPosition() berhasil, ia mengembalikan koordinat dari objek dengan fungsi yang dispesifikasikan dalam parameter (showPosition)
- Fungsi showPosition() mengeluarkan output latitude (lintang) dan longitude (bujur).
Contoh di atas adalah script Geolocation yang sangat dasar, tanpa penanganan error.
Penanganan Kesalahan dan Penolakan Geolocation
Parameter kedua dari method getCurrentPosition() digunakan untuk menangani kesalahan error. Hal ini menentukan fungsi untuk dijalankan jika gagal mendapatkan lokasi pengguna:Contoh
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User menolak permintaan Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Informasi lokasi tidak tersedia."
break;
case error.TIMEOUT:
x.innerHTML = "permintaan untuk untuk mendapat lokasi user telah habis."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "unknown error."
break;
}
}
Menampilkan Hasil dalam suatu Peta
Untuk menampilkan hasilnya dalam peta, Kita memerlukan akses ke layanan peta, seperti Google Maps.Pada contoh di bawah ini, hasil return dari garis lintang dan bujur digunakan untuk menunjukkan lokasi di Google Map (menggunakan gambar statis):
Contoh
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var 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 spesifik lokasi
Halaman ini telah menunjukkan bagaimana untuk menampilkan posisi pengguna pada peta.Geolocation juga sangat berguna untuk informasi lokasi-spesifik, seperti:
- Up-to-date informasi lokal
- Menampilkan Poin-of-interest di sekitar pengguna
- navigasi Turn-by-turn (GPS)
Method getCurrentPosition() - Mengembalikan data
Method getCurrentPosition() mengembalikan sebuah objek saat berhasil. Lintang, bujur dan properti akurasi selalu menjadi nilai yang dikembalikan. properti lainnya dikembalikan jika tersedia:| Properti | Output Kembali |
|---|---|
| coords.latitude | Nilai ordinat lintang sebagai nomor desimal (selalu dikembalikan) |
| coords.longitude | Nilai ordinat bujur sebagai nomor desimal (selalu dikembalikan) |
| coords.accuracy | Akurasi dari posisi (selalu dikembalikan) |
| coords.altitude | Ketinggian dlm meter di atas permukaan laut rata-rata (dikembalikan jika tersedia) |
| coords.altitudeAccuracy | Keakuratan ketinggian posisi (dikembalikan jika tersedia) |
| coords.heading | Arah kepala sebagai derajat searah jarum jam dari Utara (dikembalikan jika tersedia) |
| coords.speed | Kecepatan dalam m/s (dihasilkan jika tersedia) |
| timestamp | Date/time dari respon (dihasilkan jika tersedia) |
Objek Geolocation dan Method menarik lainnya
Objek Geolocation juga memiliki method lainnya yang menarik:- watchPosition() - Mengembalikan posisi saat ini pengguna dan terus kembali posisi diperbarui sebagai pengguna bergerak (seperti GPS dalam mobil).
- clearWatch() - Menghentikan fungsi method watchPosition().
Contoh di bawah ini menunjukkan method watchPosition(). Kita memerlukan perangkat GPS yang akurat untuk menguji hal ini:
Contoh
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation tidak didudukung oleh browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
