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

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

Batalkan Tonton

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

Kenyataan：

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 sebelumnya：html5 Tutorial lukisan kanvas (3)—Sebab garis 1 piksel dikaburkan pada kemahiran tutorial canvas_html5Artikel seterusnya：html5 Tutorial lukisan kanvas (3)—Sebab garis 1 piksel dikaburkan pada kemahiran tutorial canvas_html5

Artikel berkaitan

Lihat lagi

• AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
• HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
• HTML5 canvas 9绘制图片实例详解
• 正则表达式与HTML5新元素
• NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved

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