ติดตั้งตัวติดตามระยะทางโดยใช้ HTML5 Geolocation

HTML5 Geolocation ใช้เพื่อค้นหาตำแหน่งของผู้ใช้ แล้วจะใช้งานตัวติดตามระยะทางได้อย่างไร? แนวคิดของฉันคือสิ่งนี้ สมมติฐานคือเบราว์เซอร์รองรับตำแหน่งทางภูมิศาสตร์ h5 บนพื้นฐานนี้ ตำแหน่งของผู้ใช้จะได้รับการอัปเดต ตำแหน่งของผู้ใช้ได้รับการคำนวณ และแสดงบนหน้าเว็บ ด้วยวิธีนี้ เครื่องมือติดตามระยะทาง เพียงปรับใช้เพื่อให้ผู้ใช้เข้าใจได้ชัดเจนยิ่งขึ้น คุณสามารถดูตำแหน่งปัจจุบันได้โดยตรง ซึ่งเชื่อมต่อกับ Baidu Map API

โครงสร้างหน้าเป็นดังนี้:

 <div id=container> <section> <article> <header> <h1>ตำแหน่งของคุณ</h1> </header> <p class=info id=status>เบราว์เซอร์ของคุณไม่รองรับตำแหน่งทางภูมิศาสตร์ HTML5 </p> <div class=geostatus> <p id=latitude>ละติจูด: </p> <p id=ลองจิจูด>ลองจิจูด: </p> <p id=accuracy>ความแม่นยำ: </p> <p id = การประทับเวลา>การประทับเวลา: </p> <p id=currDist>ระยะการเดินทางปัจจุบัน: </p> <p id=totalDist>ระยะการเดินทางทั้งหมด: </p> </div> </article> </section> <!-- การแสดงตำแหน่งแผนที่ Baidu--> <div id=allmap></div> </div>

ตรวจสอบว่าเบราว์เซอร์รองรับตำแหน่งทางภูมิศาสตร์ HTML5 หรือไม่

เมธอด loadDemo() จะถูกเรียกเมื่อมีการโหลดเนื้อหา วิธีการนี้จะกำหนดว่าเบราว์เซอร์รองรับตำแหน่งทางภูมิศาสตร์ของ HTML5 ตาม navigator.geolocation หรือไม่ หาก navigator.geolocation เป็นจริง เราสามารถเริ่มรับและอัปเดตตำแหน่งของผู้ใช้ได้

HTML5 สามารถรับตำแหน่งของผู้ใช้ผ่านเมธอด getCurrentPosition() แต่สิ่งนี้ได้มาเพียงครั้งเดียว เราจึงเลือกวิธี watchPosition() ซึ่งสามารถคืนตำแหน่งปัจจุบันของผู้ใช้และคืนตำแหน่งที่อัปเดตต่อไปเมื่อผู้ใช้เคลื่อนที่ (เช่นเดียวกับ GPS บนรถยนต์)

 navigator.geolocation.watchPosition (updateLocation, handleLocationError, { หมดเวลา: 10,000 });

ในขณะที่รับตำแหน่งอย่างต่อเนื่อง วิธีการ updateLocation จะถูกเรียกเพื่อแสดงตำแหน่งบนเพจ แน่นอนว่าวิธีการคำนวณระยะทางก็ถูกเรียกเพื่อรับระยะทางเช่นกัน และตำแหน่งบนแผนที่ Baidu ก็ได้รับการอัปเดตอย่างต่อเนื่อง

 var latitude = position.coords.latitude;var longitude =position.coords.longitude;var precision =position.coords.accuracy;var timestamp =position.timestamp;document.getElementById(latitude).innerHTML = latitude: + latitude;document. getElementById(ลองจิจูด).innerHTML = ลองจิจูด: + ลองจิจูด;document.getElementById(accuracy).innerHTML = ความแม่นยำ: + ความแม่นยำ;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(ต้องการค่าที่แม่นยำมากขึ้นเพื่อคำนวณระยะทาง ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = ระยะทาง (ละติจูด, ลองจิจูด, LastLat, LastLong); document.getElementById(currDist).innerHTML = ระยะทางการเดินทางปัจจุบัน: + currentDistance.toFixed(2) + km; TotalDistance += currentDistance; document.getElementById(totalDist) innerHTML = ระยะทางที่เดินทางทั้งหมด: + currentDistance.toFixed(2) + km; updateStatus(Location อัปเดตสำเร็จแล้ว);}lastLat = ละติจูด;lastLong = ลองจิจูด;

ใส่ลองจิจูดและละติจูดของตำแหน่งเริ่มต้นและตำแหน่งปัจจุบันลงในฟังก์ชันเป็นพารามิเตอร์ แล้วคำนวณระยะทาง (หน่วย: กม.) ผ่านการแปลง

 Number.prototype.toRadians = function() { คืนสิ่งนี้ * Math.PI / 180; } ระยะทางของฟังก์ชัน (ละติจูด1, ลองจิจูด1, ละติจูด2, ลองจิจูด2) { var R = 6371; var deltaLongitude = (ลองจิจูด2 - ลองจิจูด1).toRadians(); latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * คณิตศาสตร์ .sin(deltaLongitude / 2) * Math.sin(เดลต้าลองจิจูด / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c;

หากต้องการใช้ Baidu Map API คุณต้องลงทะเบียนบัญชี Baidu สมัครเป็นนักพัฒนา Baidu และรับรหัสเพื่อใช้บริการที่เกี่ยวข้อง ตามเอกสารประกอบ คุณสามารถทราบวิธีใช้ API นี้ได้ รหัสมีดังนี้:

 var map = new BMap.Map(allmap); //สร้างอินสแตนซ์แผนที่ map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //ตั้งค่าพิกัดจุดกึ่งกลางและระดับแผนที่ map.addControl(new BMap .MapTypeControl ()); //เพิ่มการควบคุมประเภทแผนที่ map.setCurrentCity(Nanchang); //แสดงเมือง รายการนี้จะต้องตั้งค่า map.enableScrollWheelZoom(true); //เปิดใช้งานการซูมล้อเมาส์//ต่อไปนี้คือการตั้งค่าป้ายกำกับตำแหน่งปัจจุบัน var point = new BMap.Point(longitude, latitude); map.centerAndZoom (จุด 14 ); var marker = new BMap.Marker(point); //สร้างมาร์กเกอร์ map.addOverlay(มาร์กเกอร์); //เพิ่มเครื่องหมายลงในแผนที่ marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Bounce Animation//ฟังก์ชัน API แผนที่ Baidu--------สิ้นสุด

 <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=คีย์ของคุณ></script>

ข้างต้นคือคำแนะนำของบรรณาธิการเกี่ยวกับการใช้ตำแหน่งทางภูมิศาสตร์ของ HTML5 เพื่อใช้งานตัวติดตามระยะทาง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!