Geolocation HTML API - Purwana Tekno, Software Engineer
    Media Belajar membuat Software Aplikasi, Website, Game, & Multimedia untuk Pemula...

Post Top Ad

Senin, 02 Januari 2017

Geolocation HTML API

API Geolocation HTML digunakan untuk menemukan posisi pengguna.

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+"'>";
}
Bagaimana cara menampilkan Google Map interaktif dengan marker, zoom dan pilihan drag.

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>

Post Top Ad