تنفيذ أداة تعقب المسافة باستخدام تحديد الموقع الجغرافي بتنسيق HTML5

يتم استخدام تحديد الموقع الجغرافي بتنسيق HTML5 لتحديد موقع المستخدم. فكيف تنفيذ تعقب المسافة؟ فكرتي هي أن المتصفح يدعم تحديد الموقع الجغرافي 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=longitude>خط الطول: </p> <p id=accuracy>الدقة: </p> <p id = الطابع الزمني>الطابع الزمني: </p> <p id=currDist>مسافة السفر الحالية: </p> <p id=totalDist>إجمالي مسافة السفر: </p> </div> </article> </section> <!-- عرض موقع خريطة بايدو--> <div id=allmap></div> </div>

تحديد ما إذا كان المتصفح يدعم تحديد الموقع الجغرافي بتنسيق HTML5

يتم استدعاء الأسلوبloadDemo() عند تحميل النص. تحدد الطريقة ما إذا كان المتصفح يدعم تحديد الموقع الجغرافي بتنسيق HTML5 استنادًا إلى navigator.geolocation؛ وإذا كان navigator.geolocation صحيحًا، فيمكننا البدء في الحصول على موقع المستخدم وتحديثه.

يمكن لـ HTML5 الحصول على موضع المستخدم من خلال طريقة getCurrentPosition(). ولكن يتم الحصول على هذا مرة واحدة فقط، لذلك اخترنا طريقة watchPosition()، والتي يمكنها إرجاع الموقع الحالي للمستخدم والاستمرار في إرجاع الموقع المحدث عندما يتحرك المستخدم (تمامًا مثل نظام تحديد المواقع العالمي (GPS) في السيارة).

 navigator.geolocation.watchPosition(updateLocation, HandleLocationError, { timeout: 10000 });

أثناء الحصول على الموقع بشكل مستمر، يتم استدعاء طريقة التحديث الموقع لعرض الموقع على الصفحة، وبطبيعة الحال، يتم استدعاء طريقة حساب المسافة أيضًا للحصول على المسافة، ويتم تحديث الموقع على خريطة بايدو باستمرار.

 var latitude = location.coords.latitude;var longitude = location.coords.longitude;var الدقة = location.coords.accuracy;var timestamp = location.timestamp;document.getElementById(latitude).innerHTML = latitude: + latitude;document. getElementById(longitude).innerHTML = خط الطول: + longitude;document.getElementById(accuracy).innerHTML = الدقة: + الدقة;document.getElementById(timestamp).innerHTML = الطابع الزمني: + timestamp;if(accuracy >= 30000) { updateStatus(تحتاج إلى قيم أكثر دقة لحساب المسافة. );} if ((lastLat != null) && (lastLong != null))); { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = مسافة السفر الحالية: + currentDistance.toFixed(2) + km; TotalDistance += document.getElementById(totalDist). InternalHTML = إجمالي المسافة المقطوعة: +currentDistance.toFixed(2) + km UpdateStatus(Location تم التحديث بنجاح.);}lastLat = latitude;lastLong = longitude;

ضع خط الطول وخط العرض لموضع البداية والموضع الحالي في الوظيفة كمعلمات، واحسب المسافة (الوحدة: كم) من خلال التحويل

 Number.prototype.toRadians = function() { return this * Math.PI / 180 } function distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (longitude2 - longitude1).toRadians() latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c;

لاستخدام Baidu Map API، تحتاج إلى تسجيل حساب Baidu والتقدم لتصبح مطور Baidu والحصول على مفتاح لاستخدام الخدمات ذات الصلة، وفقًا للوثائق، يمكنك معرفة كيفية استخدام واجهة برمجة التطبيقات هذه كما يلي:

 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); // أضف علامات إلى الخريطة Marker.setAnimation(BMAP_ANIMATION_BOUNCE); //ترتد الرسوم المتحركة//وظيفة واجهة برمجة تطبيقات خريطة Baidu--------end

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

ما ورد أعلاه هو مقدمة المحرر لاستخدام تحديد الموقع الجغرافي بتنسيق HTML5 لتنفيذ أداة تعقب المسافة، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!