html5 Panduan-4. Gunakan Geolokasi untuk melaksanakan kemahiran tutorial positioning

Apa yang akan kita pelajari hari ini ialah menggunakan Geolokasi untuk melaksanakan fungsi penentududukan. Kita boleh mendapatkan objek Geolokasi melalui navigator.geolocation, yang menyediakan kaedah berikut:
getCurrentPosition(callback,errorCallback,options): Dapatkan kedudukan semasa
watchPosition(callback,error,options): Mula memantau arus kedudukan;
clearWatch(id): Berhenti memantau lokasi semasa.
nota: Penyemak imbas yang digunakan dalam contoh di bawah ialah chrome Jika anda menggunakan penyemak imbas lain, saya tidak dapat menjamin bahawa hasil yang dijalankan akan konsisten dengan hasil yang dipaparkan dalam contoh.
1. Dapatkan kedudukan semasa
Kami akan menggunakan kaedah getCurrentPosition untuk mendapatkan kedudukan semasa tidak akan dikembalikan secara langsung dalam bentuk keputusan fungsi panggil balik untuk pemprosesan. Akan terdapat beberapa kelewatan dalam mendapatkan koordinat, dan anda akan diminta untuk mendapatkan kebenaran akses. Mari lihat contoh berikut:

Salin kod

Kodnya adalah seperti berikut:

< !DOCTYPE HTML>

runtuh;}
ke, td{padding: 4px;}
th{text-align: right;}

< ;table border="1">

Longitud: /td>
Latitud:
- ;
Ketinggian:
- >-

Ketepatan: -
Tajuk:
- 🎜>< /tr>
Cap Masa:
navigator.geolocation.getCurrentPosition(displayPosition); ', 'heading ', 'speed'];
untuk (var i = 0, len = properties.length; i < len; i ) {
var value = pos.coords[properties[i]] ;
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById('timestamp').innerHTML = pos.timestamp
}
< skrip>

Objek kedudukan yang dikembalikan mengandungi dua atribut, koordinat: mengembalikan maklumat koordinat telah diperolehi. Antaranya, koord merangkumi sifat-sifat berikut: latitud: latitud: longitud: ketepatan ketinggian (meter); kedua).
Tidak semua maklumat akan dikembalikan, bergantung pada peranti yang anda gunakan untuk mengehos penyemak imbas anda. Peranti mudah alih dengan GPS, pecutan dan kompas akan mengembalikan kebanyakan maklumat, tetapi komputer rumah tidak akan mengembalikannya. Maklumat lokasi yang diperolehi oleh komputer rumah bergantung pada persekitaran rangkaian atau wifi. Mari kita lihat keputusan contoh di atas.

Klik Benarkan untuk mendapatkan maklumat koordinat.

2. Mengendalikan pengecualian

Kini kami memperkenalkan pengendalian pengecualian getCurrentPosition, yang dilaksanakan dengan menggunakan fungsi panggil balik errorCallback. Ralat parameter yang dikembalikan oleh fungsi mengandungi dua atribut, kod: kod jenis ralat: mesej ralat; Kod tersebut mengandungi tiga nilai: 1: Pengguna tidak dibenarkan menggunakan geolokasi 2: Tidak dapat mendapatkan maklumat koordinat 3: Tamat masa untuk mendapatkan maklumat;
Mari kita lihat contoh di bawah:

Salin kod

Kodnya adalah seperti berikut:

Contoh

jadual{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}

navigator.geolocation.getCurrentPosition(displayPosition, handleError);
fungsi paparanPosition(pos) {
var properties = ["longitud", "latitud", "altitud", "acuracy", "altitudeAccuracy", "heading", "speed"];
untuk (var i = 0; i < properties.length; i ) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}

拒绝授权，运行结果：

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以参数可仨参数可以使用High果； tamat masa：超时时间（毫秒）； maksimumUmur：指定缓存时间（毫秒）。我们来下下面的例子：

们下下面的例子：

复父码如下:

Contoh

jadual{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}

Longitud:	-	Latitud:	-
Altitud:	-	Ketepatan:	-
Ketepatan Ketinggian:	-	Tajuk:	-
Kelajuan:	-	Cop Masa:	-
Kod Ralat:	-	Mesej Ralat:	-

pilihan var = {
dayakanKetepatan Tinggi: palsu,
tamat masa: 2000,
Usia maksimum: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);
fungsi paparanPosition(pos) {
var properties = ["longitud", "latitud", "altitud", "acuracy", "altitudeAccuracy", "heading", "speed"];
untuk (var i = 0; i < properties.length; i ) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}

复制代码

代码如下:

Contoh

jadual{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}

Longitud:	-	Latitud:	-
Altitud:	-	Ketepatan:	-
Ketepatan Ketinggian:	-	Tajuk:	-
Kelajuan:	-	Cop Masa:	-
Kod Ralat:	-	Mesej Ralat:	-

pilihan var = {
dayakanKetepatan Tinggi: palsu,
tamat masa: 2000,
Usia maksimum: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
document.getElementById("pressme").onclick = fungsi (e) {
navigator.geolocation.clearWatch(watchID);
};
fungsi paparanPosition(pos) {
var properties = ["longitud", "latitud", "altitud", "acuracy", "altitudeAccuracy", "heading", "speed"];
untuk (var i = 0; i < properties.length; i ) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}

当点击Batalkan Tonton按钮时，停止监视。
demo下载地址：Html5Guide.Geolocation.>zip

Label berkaitan：

定位

sumber：php.cn

Artikel sebelumnya：html5 Tutorial lukisan kanvas (3)—Sebab garis 1 piksel dikaburkan pada kemahiran tutorial canvas_html5 Artikel seterusnya：html5 Tutorial lukisan kanvas (2)—Melukis garis lurus dan menetapkan gaya garisan seperti kemahiran tutorial warna/titik akhir/simpang_html5

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang