Jenis layanan yang lebih populer disebut layanan berbasis lokasi (LBS). Jenis layanan ini adalah informasi yang perusahaan menggunakan area di dekat koordinat titik tertentu (seperti lokasi di mana pengguna berada), seperti layanan terkait peta umum. Dalam HTML5, API geolokasi baru ditambahkan untuk menentukan dan berbagi geolokasi.
Pernyataan PrivasiPrivasi menjadi perhatian saat berbagi lokasi fisik dengan server web jarak jauh. Oleh karena itu, API geolokasi mengharuskan pengguna untuk memberikan izin sebelum aplikasi web dapat mengakses informasi lokasi. Ketika Anda pertama kali mengakses halaman web yang meminta data geolokasi, browser akan menampilkan bilah pemberitahuan yang meminta Anda untuk menyediakan akses ke lokasi pengguna. Ikuti petunjuk browser dan pilih otorisasi yang relevan.
Jika pengguna tidak memberikan izin, informasi lokasi tidak disediakan untuk aplikasi web. Memanggil API yang relevan tidak akan memicu panggilan balik yang berhasil.
Periksa dukungan browserAPI geolokasi didukung dalam versi terbaru dari browser arus utama, tetapi agar dapat kompatibel dengan browser lama, Anda masih perlu memeriksanya. Jika API geolokasi tidak tersedia, window.navigator.geolocation akan menjadi nol sebagai berikut:
function show_islocationenabled ()
{
var str = "Tidak, geolokasi tidak didukung.";
if (window.navigator.geolocation) {
str = "Ya, geolokasi didukung.";
}
waspada (str);
}
API geolokasi didasarkan pada properti baru dari objek global navigasi: navigator.geolocation, yang menyediakan beberapa informasi berguna tentang browser dan sistem pengunjung. Informasi geolokasi dapat diperoleh melalui banyak cara: seperti stasiun pangkalan, database web atau GPS. Keakuratan informasi geolokasi yang diperoleh dengan menggunakan metode yang berbeda juga berbeda. Secara umum, yang paling akurat diperoleh melalui GPS (GPS terbanyak digunakan pada platform seluler, dan platform PC pada dasarnya bergantung pada data jaringan). Secara kebetulan, di beberapa lokasi, Anda mungkin tidak dapat memperoleh bacaan lokasi geografis yang jelas atau tidak menerima data.
Posisikan lokasi saat iniGunakan metode navigasi getCurrentPosition () untuk mendapatkan lokasi pengguna saat ini. Metode ini hanya mendapatkan informasi lokasi sekali. Ketika metode dipanggil oleh skrip, metode ini mencoba untuk mendapatkan lokasi saat ini dari perangkat host dengan cara yang tidak sinkron.
Metode Signature: GetCurrentPosition (GeolocationsuccessCallback, [GeoloceErrorCallback, GeolocationOptions]);
1. Geolocationsuccesscallback: Dapatkan panggilan balik setelah lokasi saat ini berhasil (diperlukan)
2. GeolocationErrorCallback. Callback digunakan saat kesalahan terjadi (opsional)
3. GeolocationOptions. Opsi geolokasi (opsional)
Memproses informasi lokasi
Setelah metode getCurrentPositon () berhasil memperoleh posisi saat ini, ia akan menyimpan informasi posisi ke objek posisi, dan kemudian menggunakan objek ini sebagai parameter untuk menjalankan panggilan balik geolocationsuccesscallback. Dalam fungsi panggilan balik ini, Anda dapat menangani informasi yang terkandung secara sewenang -wenang dalam objek ini.
Objek posisi memiliki dua properti: cap waktu dan koordin. Atribut cap waktu mewakili waktu penciptaan data geolokasi, dan atribut Coords mewakili informasi geolokasi, dan berisi tujuh atribut:
.coords.latitude: perkiraan garis lintang
. coords.longitude: Perkirakan bujur
.coords.altitude: Tinggi yang diperkirakan
. COOKS.Accuracy: Akurasi perkiraan bujur dan garis lintang yang disediakan dalam meter
.coords.altituceaccuracy: akurasi perkiraan tinggi yang disediakan dalam meter
. Koordinat. Heading: Arah sudut perangkat host saat ini bergerak, dihitung searah jarum jam relatif ke arah utara
.coords.speed: Kecepatan tanah saat ini dari perangkat dalam meter per detik
Secara umum, tiga dari properti ini dijamin: coords.latitude, coords.longitude, dan coords. Akurasi, dan sisanya mengembalikan nol; Ini tergantung pada kemampuan perangkat dan server penentuan posisi backend yang digunakannya. Selain itu, properti heading dan speed dapat dihitung berdasarkan posisi pengguna sebelumnya.
Penanganan kesalahanJika kesalahan terjadi saat mengeksekusi metode getCurrentPositon (), metode ini melewati objek PositionError ke callback geolocationErrorCallback.
Atur opsi geolokasiAnda dapat mengatur tiga properti geolokasi:
EnableHighAccuracy: Jika perangkat mendukung presisi tinggi, opsi ini menunjukkan apakah presisi tinggi diaktifkan.
Timeout: Permintaan Timeout
Maksimal: Jumlah maksimum cache berada, di mana cache dapat digunakan.
Lihat contoh lengkap di bawah ini:
<! Doctype html>
<Html>
<body>
<p id = "demo"> Klik tombol untuk mendapatkan posisi Anda: </p>
<tombol OnClick = "getLocation ()"> Coba </button>
<Div ID = "Maholder"> </div>
<script>
var x = document.getElementById ("demo");
function getLocation () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (showposition, showerror);
}
kalau tidak{
x.innerhtml = "Geolokasi tidak didukung oleh browser ini.";
}
}
function showposition (position) {
var latlon = position.coords.latitude+","+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& zoom = 9 & size = 400x300 & sensor = false";
document.getElementById ("Maholder"). innerHtml = "<img src = '"+img_url+"' />";
}
function showerror (error) {
switch (error.code) {
case error.permission_denied:
x.innerhtml = "Pengguna menolak permintaan geolokasi."
merusak;
case error.position_unavailable:
x.innerhtml = "Informasi lokasi tidak tersedia."
merusak;
case error.timeout:
x.innerhtml = "Permintaan untuk mendapatkan lokasi lokasi pengguna habis."
merusak;
case error.unknown_error:
x.innerhtml = "Terjadi kesalahan yang tidak diketahui."
merusak;
}
}
</script>
</body>
</html>
Contoh ini mengambil lokasi geografis perangkat saat ini dan menampilkannya di Google Maps. Tentu saja Anda dapat menggunakan versi grafik statis di Baidu Maps API untuk mengubah contoh ini. Untuk API peta Baidu, silakan merujuk ke tautan dalam referensi praktis nanti.
Nyalakan/Batalkan Posisi BerkelanjutanGunakan metode navigasi WatchPosition (). GEOLOCASI untuk polling lokasi pengguna secara teratur untuk melihat apakah lokasi pengguna telah berubah. Metode ini memiliki tiga parameter: ketiga parameter ini sama dengan metode getCurrentPosition (), panggilan balik yang berhasil, panggilan balik yang gagal, dan opsi untuk mendapatkan informasi posisi; Metode ini memiliki Nilai Pengembalian WatchID, yang digunakan untuk membatalkan penentuan posisi berkelanjutan.
Gunakan metode navigasi clearwatch (). GEOLOCASI untuk mengakhiri WatchPosition () yang sedang berlangsung, yang hanya mengambil satu Parameter WatchID.
Lihat contoh berikut:
<! Doctype html>
<Html>
<head>
<Title> Contoh API Geolokasi: Mendengarkan Pembaruan Lokasi </iteme>
<meta http-equiv = "x-ua-kompatibel" konten = "ie = 9" />
<type skrip = "Teks/JavaScript">
fungsi settext (val, e) {
document.geteLementById (e) .value = val;
}
var nav = null;
var watchid;
function listenforpositionupdates () {
if (nav == null) {
nav = window.navigator;
}
if (nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchId = geoloc.watchposition (SuccessCallback);
}
kalau tidak {
peringatan ("Geolokasi tidak didukung");
}
}
kalau tidak {
peringatan ("Navigator tidak ditemukan");
}
}
fungsi clearwatch (watchId) {
window.navigator.geolocation.clearwatch (watchID);
}
Fungsi SuccessCallback (Posisi)
{
setText (position.coords.latitude, "latitude");
setText (position.coords.longitude, "bujur");
}
</script>
</head>
<body>
<label untuk = "latitude"> latitude: < /label> <input id = "latitude" />
<Label untuk = "Longitude"> Longitude: < /Label> <Input ID = "Longitude" />
<input type = "Tombol" value = "tonton latitude and longitude" onclick = "listenforpositionupdates ()" />
<input type = "tombol" value = "clear watch" onclick = "clearwatch ()" />
</body>
</html>
Referensi Praktis:Dokumen Resmi: http://www.w3schools.com/html5/html5_geolocation.asp
Template Kekhawatiran: http://www.cuoxin.com/w3school/html5/
Bantuan Microsoft: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
Baidu Map API: http://dev.baidu.com/wiki/static/index.htm