Section Artikel
Temukan Posisi Pengguna
API Geolokasi HTML digunakan untuk mendapatkan posisi geografis pengguna.
Karena ini dapat membahayakan privasi, posisi tidak akan tersedia kecuali pengguna menyetujuinya.
Catatan: Geolokasi paling akurat untuk perangkat dengan GPS, seperti smartphone.
API Geolokasi didukung di semua browser:
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | Ya | Ya | Ya | Ya |
Catatan: Mulai Chrome 50, Geolocation API hanya akan bekerja pada konteks aman seperti HTTPS. Jika situs dihosting pada tempat yang tidak aman (seperti HTTP), permintaan untuk mendapatkan lokasi pengguna tidak akan berfungsi lagi.
Menggunakan API Geolokasi
Metode getCurrentPosition() digunakan untuk mengembalikan posisi pengguna.
Contoh di bawah menampilkan garis lintang dan bujur dari posisi pengguna.
Contoh:
<!DOCTYPE html> <html> <body> <p>Klik tombol untuk mendapatkan koordinat Anda.</p> <button onclick="getLocation()">Coba</button> <p id="demo"></p> <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 = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>
Penjelasan contoh:
- Periksa apakah Geolocation didukung
- Jika didukung, jalankan metode getCurrentPosition(). Jika tidak, tampilkan pesan kepada pengguna
- Jika metode getCurrentPosition() berhasil, ia mengembalikan objek koordinat ke fungsi yang ditentukan dalam parameter (showPosition)
- Fungsi showPosition() mengeluarkan Latitude dan Longitude
Contoh di atas adalah skrip Geolokasi yang sangat mendasar, tanpa penanganan error.
Menangani Kesalahan dan Penolakan
Parameter kedua dari metode getCurrentPosition() digunakan untuk menangani kesalahan. Ini menentukan fungsi apa yang dijalankan jika gagal mendapatkan lokasi pengguna.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Klik tombol untuk mendapatkan koordinat Anda.</p>
<button onclick="getLocation()">Coba</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
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;
}
}
</script>
</body>
</html>
Menampilkan Hasil pada Map
Untuk menampilkan hasil pada map, maka memerlukan akses ke layanan map seperti Google Maps.
Pada contoh di bawah ini, garis lintang dan bujur yang dikembalikan 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
Tutorial kali ini telah mendemonstrasikan bagaimana menampilkan posisi pengguna pada map.
Geolokasi juga sangat berguna untuk informasi spesifik lokasi, seperti:
- Informasi lokal terkini
- Menampilkan Tempat Menarik di dekat pengguna
- Navigasi belokan demi belokan (GPS)
Metode getCurrentPosition() – Mengembalikan Data
Metode getCurrentPosition() mengembalikan objek saat berhasil. Properti lintang, bujur, dan akurasi selalu dikembalikan. Properti lainnya dikembalikan jika tersedia:
| Properti | Return |
|---|---|
| coords.latitude | Garis lintang sebagai angka desimal (selalu dikembalikan) |
| coords.longitude | Bujur sebagai angka desimal (selalu dikembalikan) |
| coords.accuracy | Akurasi posisi (selalu dikembalikan) |
| coords.altitude | Ketinggian dalam meter di atas permukaan laut rata-rata (dikembalikan jika tersedia) |
| coords.altitudeAccuracy | Akurasi ketinggian posisi (dikembalikan jika tersedia) |
| coords.heading | Judul dalam derajat searah jarum jam dari Utara (dikembalikan jika tersedia) |
| coords.speed | Akurasi ketinggian posisi (dikembalikan jika tersedia)… |
| timestamp | Tanggal / waktu tanggapan (dikembalikan jika tersedia) |
Objek Geolokasi – Metode menarik lainnya
Objek Geolocation juga memiliki metode menarik lainnya, contoh:
- watchPosition() – Mengembalikan posisi pengguna saat ini dan terus mengembalikan posisi yang diperbarui saat pengguna bergerak (seperti GPS di dalam mobil).
- clearWatch() – Menghentikan metode watchPosition ().
Contoh di bawah ini menunjukkan metode watchPosition(). Anda memerlukan perangkat GPS yang akurat untuk mengujinya (seperti smartphone):
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol untuk mendapatkan koordinat Anda.</p>
<button onclick="getLocation()">Coba</button>
<p id="demo"></p>
<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="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
