Belajar HTML5 Dan Geolocation HTML5

Labkom99.com – API GeoLocation HTML5 (geolocation API) bisa digunakan untuk mendapatkan lokasi geografis pengguna. Untuk alasan keamanan menggunakan GeoLocation HTML5 , sebuah kotak dialog akan muncul untuk memungkinkan pengguna memutuskan apakah akan membagikan lokasi mereka. Hanya dengan persetujuan pengguna, aplikasi dapat memperoleh lokasi pengguna.

Ada banyak skenario aplikasi untuk GeoLocation HTML5. Misalnya, Anda dapat memberikan informasi diskon kepada pengguna tentang produk di wilayah mereka, dan Anda dapat meminta pengguna untuk membagikan lokasi geografis mereka. Jika mereka setuju, aplikasi dapat memberi mereka informasi diskon tentang produk terkait di wilayah tersebut.

Skenario aplikasi lain dari GeoLocation HTML5 adalah membangun aplikasi yang menghitung jarak berjalan kaki. Saat pengguna mulai menjalankan, dia dapat membuka aplikasi melalui browser seluler dan memulai fungsi perekaman. Selama pergerakan pengguna, aplikasi akan mencatat jarak yang telah dilalui pengguna, dan juga dapat menampilkan koordinat lari di peta, bahkan menampilkan posisi ketinggian.

Skenario aplikasi lain dari HTML5 GeoLocation adalah aplikasi jejaring sosial berbasis navigasi GPS. Melalui itu Anda dapat melihat di mana teman Anda berada.

Akses Lokasi Geolocation HTML5

Kita dapat menggunakan navigator.geolocationobjek browser untuk mengakses lokasi geografis melalui javascript. Objek lokasi memungkinkan kita menggunakan dua fungsi untuk mengakses lokasi:

• getCurrentPosition()
• watchPosition()

getCurrentPosition() Fungsi mengembalikan lokasi pengunjung dalam sebuah snapshot. watchPosition() Kembalikan posisi baru pengunjung setiap kali posisi berubah. Kedua fungsi tersebut memiliki 3 parameter berikut:

• Fungsi call-back ketika sukses
• Fungsi call-back ketika gagal (opsional)
• Objek parameter lokasi geografis (opsional)

Berikut ini adalah contoh, dengan ini bisa mendapatkan lokasi pengguna, getCurrentPosition() dan hanya fungsi panggilan balik ketika sukses yang diteruskan dalam metode parameter .

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
);          

Informasi lokasi geografis diperoleh secara asinkron. Ini berarti Anda akan segera kembali saat memanggil fungsi getCurrentPosition() atau watchPosition(). Saat browser mengirimkan permintaan untuk mendapatkan lokasi geografis pengguna, dan pengguna menyetujui lokasi geografis browser, fungsi panggilan balik berhasil dipanggil. Jika terjadi kesalahan, fungsi panggilan balik kesalahan akan dipanggil.

Objek Lokasi

Fungsi call-back yang berhasil yang diteruskan oleh objek pemosisian mirip dengan berikut ini:

double latitude        
double longitude        
double accuracy        
 
double altitude         
double altitudeAccuracy 
double heading          
double speed

latitude Dan longitude koordinat geografis yang berisi lokasi. accuracy Berisi informasi lokasi yang akurat untuk pengukur. Semakin rendah akurasinya, semakin tepat posisinya.

altitude, altitudeAccuracy, heading Dan speed properti hanya tertanam di browser perangkat, hanya ada GPS valid. Jika tidak, parameter ini dapat disetel ke null.

altitude Atribut berisi informasi ketinggian lokasi geografis pengguna. altitude Accuracy Atribut berisi ketinggian yang akurat hingga meter. heading Atribut digunakan untuk menunjukkan arah pergerakan pengguna. Nilainya relatif ke utara arah sebenarnya dalam derajat, mulai dari 0-360. speed Atribut berisi kecepatan gerakan pengguna, dihitung dalam meter per detik.

Kesalahan Fungsi Call-back

Jika lokasi geografis pengguna gagal diperoleh, fungsi error call-back yang diteruskan ke fungsi getCurrentPosition() atau watchPosition() akan dipanggil. Mungkin ada beberapa alasan kegagalan mendapatkan lokasi geografis pengguna:

1. Pengguna menolak browser untuk mengakses lokasi geografisnya.

2. Browser perangkat tidak dapat memperoleh lokasi geografis. Misalnya: Setelan menjalankan browser di terowongan, atau bawah tanah, dll., Di mana tidak dapat menerima sinyal satelit GPS.

3. Perangkat telah kehabisan waktu untuk mendapatkan lokasi geografis.

Fungsi error call-back menerima objek dengan dua parameter:

short code    
DOMString message  

code Nilai atribut memiliki 3 kemungkinan nilai berikut:

1. artinya PERMISSION_DENIED

2. yang artinya POSSITION_UNAVAILABLE

3. kata TIME OUT

message Atribut berisi teks deskriptif dari pesan kesalahan. Pesan kesalahan ini berguna untuk pengembang, tetapi tidak boleh terbuka untuk pemirsa.

Objek Opsi Lokasi

getCurrentPosition() Fungsi penjumlahan watchPosition() dapat mengirimkan objek opsi lokasi dengan 3 parameter atribut. Objek opsi dapat berisi 3 atribut berikut:

enableHighAccuracy    
timeout                
maximumAge   

enable High Accuracy Atribut dapat disetel ke true atau false. Diatur true, jika browser perangkat memiliki GPS, itu akan diaktifkan. Perlu dicatat bahwa GPS sangat haus daya, jadi jangan menyalakannya kecuali Anda membutuhkannya.

time out Atribut menentukan berapa lama menunggu saat mendapatkan lokasi geografis dapat didefinisikan sebagai waktu tunggu. Fungsi error call-back akan dipanggil jika waktunya habis.

maximum Age Atribut menentukan berapa lama browser menyimpan lokasi geografis. Jika disetel ke 0, lokasi geografis baru akan diperoleh setiap kali fungsi panggilan balik berhasil dipanggil.

Contoh Geolocation HTML5

Berikut ini adalah contoh lengkap untuk mendapatkan lokasi geografis yang data digunakan sebagai media belajar HTML5, termasuk fungsi panggilan balik yang berhasil dan fungsi panggilan balik yang gagal, dan pilihan objek :

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
    ,
    function(errorObject) {
        alert("Error obtaining position");
    }
    ,
    {
      enableHighAccuracy : true,
      timeout    : 3000,
      maximumAge : 60000
    }
);