API Geolokasi Web
Temukan Posisi Pengguna
HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.
Karena ini dapat membahayakan privasi, posisi tersebut tidak tersedia kecuali jika pengguna menyetujuinya.
Catatan: Geolokasi paling akurat untuk perangkat dengan GPS, seperti smartphone.
Geolocation API didukung di semua browser:
| Yes | Yes | Yes | Yes | Yes |
Catatan: Mulai Chrome 50, API Geolokasi hanya akan berfungsi pada konteks aman seperti HTTPS. Jika situs Anda dihosting di asal yang tidak aman (seperti HTTP), permintaan untuk mendapatkan lokasi pengguna tidak akan berfungsi lagi.
Menggunakan API Geolokasi
Metode getCurrentPosition()ini digunakan untuk mengembalikan posisi pengguna.
Contoh di bawah ini mengembalikan garis lintang dan garis bujur dari posisi pengguna:
Contoh
<script>
const 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>
Contoh menjelaskan:
- Periksa apakah Geolokasi 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() menampilkan Latitude dan Longitude
Contoh di atas adalah skrip Geolokasi yang sangat mendasar, tanpa penanganan kesalahan.
Menangani Kesalahan dan Penolakan
Parameter kedua dari getCurrentPosition()metode ini digunakan untuk menangani kesalahan. Ini menentukan fungsi untuk dijalankan jika gagal mendapatkan lokasi pengguna:
Contoh
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;
}
}
Menampilkan Hasil dalam Peta
Untuk menampilkan hasilnya dalam peta, Anda memerlukan akses ke layanan peta, seperti Google Maps.
Pada contoh di bawah, garis lintang dan garis bujur yang dikembalikan digunakan untuk menunjukkan lokasi di Google Map (menggunakan gambar statis):
Contoh
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let 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 khusus lokasi
Halaman ini telah menunjukkan cara menunjukkan posisi pengguna di peta.
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 pada keberhasilan. Properti garis lintang, garis bujur, dan akurasi selalu dikembalikan. Properti lainnya dikembalikan jika tersedia:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Objek Geolokasi - Metode menarik lainnya
Objek Geolocation juga memiliki metode menarik lainnya:
watchPosition()- Mengembalikan posisi pengguna saat ini dan terus mengembalikan posisi yang diperbarui saat pengguna bergerak (seperti GPS di dalam mobil).clearWatch()- MenghentikanwatchPosition()metode.
Contoh di bawah ini menunjukkan watchPosition()metodenya. Anda memerlukan perangkat GPS yang akurat untuk menguji ini (seperti ponsel cerdas):
Contoh
<script>
const 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>