HTML5 Geolocation

Cari Posisi Pengguna

HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.

Karena ini bisa kompromi privasi pengguna, posisi tidak tersedia kecuali pengguna menyetujuinya.

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh Geolocation.

API
Geolocation	5.0	9.0	3.5	5.0	16.0

Catatan: Geolocation jauh lebih akurat untuk perangkat dengan GPS, seperti iPhone.

Menggunakan HTML Geolocation

Gunakan metode getCurrentPosition () untuk mendapatkan posisi pengguna.

Contoh di bawah ini adalah contoh sederhana Geolocation kembali garis lintang dan bujur dari posisi pengguna:

<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>

Contoh menjelaskan:

1. Periksa apakah Geolocation didukung

2. Jika didukung, menjalankan metode getCurrentPosition (). Jika tidak, 3. menampilkan pesan ke pengguna

3.Jika metode getCurrentPosition () berhasil, ia mengembalikan koordinat keberatan dengan fungsi tertentu dalam parameter (showPosition)

4. The showPosition () fungsi mendapatkan menampilkan Latitude dan Longitude

Contoh di atas adalah script Geolocation sangat dasar, dengan tidak ada penanganan error.

Handling Errors and Rejections

Parameter kedua dari metode getCurrentPosition () digunakan untuk menangani error. Ini menentukan fungsi untuk menjalankan jika gagal untuk mendapatkan lokasi pengguna:

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;
    }
}

Kode Kesalahan:

1. Izin ditolak - Pengguna tidak memungkinkan Geolocation

2. Posisi tersedia - Hal ini tidak mungkin untuk mendapatkan lokasi saat

3. Timeout - Terlalu lama

Menampilkan Hasil dalam Peta yang

Untuk menampilkan hasilnya dalam peta, Anda memerlukan akses ke layanan peta yang dapat menggunakan garis lintang dan bujur, seperti Google Maps:

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+"'>";
}

Dalam contoh di atas kita menggunakan garis lintang dan bujur data yang dikembalikan untuk menunjukkan lokasi di peta Google (menggunakan gambar statis).

Google Map Script

Cara menggunakan script untuk menampilkan peta interaktif dengan spidol, zoom dan pilihan drag.

Lokasi tertentu Informasi

Halaman ini menunjukkan bagaimana untuk menunjukkan posisi pengguna pada peta. Namun, Geolocation juga sangat berguna untuk informasi spesifik lokasi.

contoh:

1. Up-to-date informasi lokal

2. Menampilkan Poin-of-bunga mendekati pengguna

3. Turn-by-turn navigasi (GPS)

The getCurrentPosition () Metode - Kembali data

The getCurrentPosition () metode mengembalikan sebuah objek jika berhasil. The lintang, bujur dan akurasi properti selalu dikembalikan. Sifat lain di bawah dikembalikan jika tersedia.

Property	Description
coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

Geolocation object - Other interesting Methods

watchPosition () - Mengembalikan posisi saat pengguna dan terus kembali posisi diperbarui bergerak pengguna (seperti GPS dalam mobil).

clearWatch () - Menghentikan metode watchPosition ().

Contoh di bawah ini menunjukkan metode watchPosition (). Anda memerlukan perangkat GPS yang akurat untuk tes ini (seperti iPhone):

<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>