hujung hadapan web
Tutorial H5
html5 Panduan-4. Gunakan Geolokasi untuk melaksanakan kemahiran tutorial positioning_html5
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:
< !DOCTYPE HTML>
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:
Kodnya adalah seperti berikut:
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;
}
拒绝授权，运行结果：
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以参数可仨参数可以使用High果； tamat masa：超时时间（毫秒）； maksimumUmur：指定缓存时间（毫秒）。我们来下下面的例子：
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;
}
复制代码
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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Cara menggunakan fungsi peta dan lokasi dalam uniapp
Oct 16, 2023 am 08:01 AM
Cara menggunakan fungsi peta dan kedudukan dalam uniapp 1. Pengenalan latar belakang Dengan populariti aplikasi mudah alih dan perkembangan pesat teknologi penentududukan, fungsi peta dan penentududukan telah menjadi bahagian yang amat diperlukan dalam aplikasi mudah alih moden. uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js, yang boleh memudahkan pembangun berkongsi kod pada berbilang platform. Artikel ini akan memperkenalkan cara menggunakan peta dan fungsi kedudukan dalam uniapp dan memberikan contoh kod khusus. 2. Gunakan komponen uniapp-amap untuk melaksanakan fungsi peta
Bagaimana untuk mencari fon telinga wayarles Apple jika ia hilang_Cara untuk mencari fon telinga wayarles Apple
Mar 23, 2024 am 08:21 AM
1. Mula-mula, kami membuka Apl [Cari] pada telefon mudah alih dan pilih peranti dalam senarai pada antara muka peranti. 2. Kemudian, anda boleh menyemak lokasi dan klik pada laluan untuk menavigasi ke sana.
Cara menggunakan pemalam WordPress untuk mencapai fungsi kedudukan segera
Sep 05, 2023 pm 04:51 PM
Cara menggunakan pemalam WordPress untuk mencapai fungsi lokasi segera Dengan populariti peranti mudah alih, semakin banyak tapak web mula menyediakan perkhidmatan berasaskan geolokasi. Dalam laman web WordPress, kami boleh menggunakan pemalam untuk mencapai fungsi kedudukan segera dan menyediakan pelawat dengan perkhidmatan yang berkaitan dengan lokasi geografi. 1. Pilih pemalam yang betul Terdapat banyak pemalam yang menyediakan perkhidmatan geolokasi dalam pustaka pemalam WordPress untuk dipilih. Bergantung pada keperluan dan keperluan, memilih pemalam yang betul adalah kunci untuk mencapai kefungsian kedudukan segera. Berikut adalah beberapa
Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go
Jul 01, 2023 pm 12:33 PM
Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go: Kebocoran memori adalah salah satu masalah biasa dalam pembangunan program. Dalam pembangunan bahasa Go, disebabkan kewujudan mekanisme pengumpulan sampah automatiknya, masalah kebocoran memori mungkin kurang daripada bahasa lain. Walau bagaimanapun, apabila kita menghadapi aplikasi yang besar dan kompleks, kebocoran memori mungkin masih berlaku. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk mencari dan menyelesaikan masalah kebocoran memori dalam pembangunan bahasa Go. Pertama, kita perlu memahami apa itu kebocoran memori. Ringkasnya, kebocoran memori merujuk kepada
Bagaimana untuk mencari lokasi telefon bimbit pihak lain di Amap - Bagaimana untuk mengesan lokasi telefon bimbit pihak lain di Amap
Apr 01, 2024 pm 02:11 PM
1. Klik untuk memasukkan perisian peta Amap pada telefon mudah alih anda. 2. Klik Saya di penjuru kanan sebelah bawah. 3. Klik untuk memasukkan peta keluarga. 4. Klik Cipta Peta Keluarga Saya. 5. Selepas penciptaan berjaya, kod jemputan akan muncul dan boleh dikongsi dengan telefon bimbit lain.
Cara menukar maklumat lokasi dan cara mengubah suai alamat
Mar 12, 2024 pm 09:52 PM
Kita semua tahu dengan jelas bahawa Taku APP ialah platform sembang dan sosial yang boleh dipercayai. Kini ia membolehkan semua orang berkawan dalam talian Lagipun, ia boleh mencari maklumat lokasi semasa anda secara automatik dan lebih baik memadankan anda dengan beberapa rakan di bandar yang sama yang rapat antara satu sama lain, supaya semua orang boleh bersembang dengan lebih mudah dan berasa gembira, berkali-kali, untuk mendapatkannya untuk mengetahui lebih ramai rakan di tempat lain, semua orang mempunyai idea untuk mengubah suai alamat mereka, tetapi mereka tidak tahu cara mengubah suai maklumat lokasi mereka, yang sangat sukar, jadi editor tapak ini juga mengumpul beberapa khusus
Bagaimana untuk mencari lokasi telefon Huawei dengan cepat selepas ia hilang?
Mar 24, 2024 am 08:48 AM
Dalam masyarakat hari ini, telefon bimbit telah menjadi sebahagian daripada kehidupan kita. Sebagai jenama telefon pintar yang terkenal, telefon bimbit Huawei amat digemari oleh pengguna. Namun, dengan kepopularan telefon bimbit dan peningkatan kekerapan penggunaan, telefon bimbit sering hilang. Sebaik sahaja telefon kita hilang, kita cenderung berasa cemas dan keliru. Jadi, jika anda kehilangan telefon Huawei anda, bagaimanakah anda boleh mencari lokasinya dengan cepat? Langkah 1: Gunakan fungsi penentududukan telefon mudah alih Telefon bimbit Huawei mempunyai fungsi penentududukan berkuasa terbina dalam Pengguna boleh menggunakan pilihan "Keselamatan" dalam tetapan telefon mudah alih.
Menaip iPhone 'Oil found' mencetuskan lokasi? Bolehkah privasi masih terjamin?
Apr 26, 2024 pm 01:28 PM
Baru-baru ini, ramai pengguna di Internet mengatakan bahawa apabila menggunakan telefon Apple untuk mencari atau mengulas mengenai topik yang berkaitan dengan "menemui minyak," peranti itu akan menghidupkan kedudukan secara automatik Adalah disyaki bahawa telefon Apple sedang mengumpul dan menghantar maklumat lokasi untuk memantau pengguna. Adakah menaip "Oil found" pada iPhone akan mencetuskan lokasi? Bolehkah privasi Apple dijamin dengan cara ini? Jelas sekali, ini adalah salah faham! Perkhidmatan pelanggan Apple berkata bahawa fungsi penentududukan dihidupkan secara lalai, dan sebarang operasi boleh mencetuskan kemas kini status, dan bukannya terhad kepada menghantar teks tertentu. Tetapi kenyataan ini tidak sepenuhnya menyeluruh Secara amnya, iPhone jarang mencetuskan fungsi penentududukan, melainkan anda sedang mencari sesuatu, atau tetapan mekanisme APP berkaitan Apabila pengguna memasukkan aksara tertentu, APP akan mendayakan fungsi penentududukan secara automatik latar belakang. Kenapa boleh topik ni
| Longitud: | - | Latitud: | - |
|---|---|---|---|
| Altitud: | - | Ketepatan: | - |
| Ketepatan Ketinggian: | - | Tajuk: | - |
| Kelajuan: | - | Cop Masa: | - |
| Kod Ralat: | - | Mesej Ralat: | - |