Menerapkan pelacak jarak menggunakan Geolokasi HTML5

Geolokasi HTML5 digunakan untuk menemukan lokasi pengguna. Jadi bagaimana cara menerapkan pelacak jarak? Ide saya adalah ini. Premisnya adalah browser mendukung geolokasi h5. Atas dasar ini, lokasi pengguna diperoleh, lokasi pengguna diperbarui, jarak dihitung, dan ditampilkan pada halaman cukup diimplementasikan agar lebih jelas bagi pengguna. Anda dapat melihat lokasi saat ini secara langsung, yang terhubung ke Baidu Map API.

Struktur halamannya adalah sebagai berikut:

 <div id=container> <section> <article> <header> <h1>Lokasi Anda</h1> </header> <p class=info id=status>Browser Anda tidak mendukung Geolokasi HTML5. </p> <div class=geostatus> <p id=latitude>Lintang: </p> <p id=bujur>Bujur: </p> <p id=accuracy>Akurasi: </p> <p id = stempel waktu>Stempel waktu: </p> <p id=currDist>Jarak perjalanan saat ini: </p> <p id=totalDist>Total jarak perjalanan: </p> </div> </article> </section> <!-- Tampilan lokasi peta Baidu--> <div id=allmap></div> </div>

Tentukan apakah browser mendukung Geolokasi HTML5

Metode loadDemo() dipanggil saat isi dimuat. Metode ini menentukan apakah browser mendukung Geolokasi HTML5 berdasarkan navigator.geolocation; jika navigator.geolocation benar, maka kita dapat mulai mendapatkan dan memperbarui lokasi pengguna.

HTML5 dapat memperoleh posisi pengguna melalui metode getCurrentPosition(). Namun ini hanya diperoleh satu kali saja, jadi kami memilih metode watchPosition(), yang dapat mengembalikan posisi pengguna saat ini dan terus mengembalikan posisi yang diperbarui saat pengguna bergerak (seperti GPS di mobil).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { batas waktu: 10000 });

Sambil terus mendapatkan lokasi, metode updateLocation dipanggil untuk menampilkan lokasi di halaman. Tentu saja, metode penghitungan jarak juga dipanggil untuk mendapatkan jarak, dan lokasi di peta Baidu terus diperbarui.

 var lintang = posisi.coords.latitude;var bujur = posisi.coords.longitude;var akurasi = posisi.coords.accuracy;var stempel waktu = posisi.timestamp;document.getElementById(latitude).innerHTML = lintang: + lintang;dokumen. getElementById(bujur).innerHTML = bujur: + bujur;document.getElementById(accuracy).innerHTML = akurasi: + akurasi;document.getElementById(timestamp).innerHTML = stempel waktu: + stempel waktu;if(akurasi >= 30000) { updateStatus(Memerlukan nilai yang lebih akurat untuk menghitung jarak. ); kembali;}jika((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = Jarak perjalanan saat ini: + currentDistance.toFixed(2) + totalDistance += currentDistance; innerHTML = total jarak tempuh: + currentDistance.toFixed(2) + km; updateStatus(Location berhasil diperbarui.);}lastLat = lintang;lastLong = bujur;

Masukkan garis bujur dan lintang dari posisi awal dan posisi saat ini ke dalam fungsi sebagai parameter, dan hitung jarak (satuan: km) melalui konversi

 Number.prototype.toRadians = function() { kembalikan ini * Math.PI / 180; }fungsi jarak(lintang1, bujur1, lintang2, bujur2) { var R = 6371; var deltaLongitude = (bujur2 - bujur1).toRadians(); lintang1 = garis lintang1.toRadians(), garis lintang2 = garis lintang2.toRadians(); var a = Matematika.sin(deltaLatitude / 2) * Matematika.sin(deltaLatitude / 2) + Matematika.cos(lintang1) * Matematika.cos(lintang2) * Matematika .sin(deltaBujur / 2) * Math.sin(deltaBujur / 2); 2 * Matematika.atan2(Matematika.sqrt(a), Matematika.sqrt(1 - a)); var d = R * c;

Untuk menggunakan Baidu Map API, Anda perlu mendaftarkan akun Baidu, mendaftar untuk menjadi pengembang Baidu dan mendapatkan kunci untuk menggunakan layanan terkait. Menurut dokumentasi, Anda dapat mengetahui cara menggunakan API ini.

 var map = new BMap.Map(allmap); //Membuat instance Peta map.centerAndZoom(new BMap.Point(bujur, lintang), 14); //Menetapkan koordinat titik pusat dan level peta map.addControl(BMap baru .MapTypeControl()); //Tambahkan kontrol tipe peta map.setCurrentCity(Nanchang); //Menampilkan kota, item ini harus disetel map.enableScrollWheelZoom(true); //Aktifkan zoom roda mouse//Berikut ini adalah pengaturan label lokasi saat ini var point = new BMap.Point(longitude, lintang map.centerAndZoom); (titik, 14 ); var marker = new BMap.Marker(titik); //Buat penanda map.addOverlay(marker); //Tambahkan penanda ke penanda peta.setAnimation(BMAP_ANIMATION_BOUNCE); //Animasi pantulan//Fungsi API peta Baidu--------akhir

 <skrip type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=kunci Anda></script>

Di atas adalah pengenalan editor dalam menggunakan Geolokasi HTML5 untuk mengimplementasikan pelacak jarak. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!