مقياس رحلات بسيط يستخدم واجهة برمجة التطبيقات لتحديد الموقع الجغرافي

Michael Mahemoff

مقدمة

تتيح لك واجهة برمجة التطبيقات للموقع الجغرافي معرفة مكان المستخدم وتتبُّعه أثناء تنقّله، ويتم ذلك دائمًا بموافقة المستخدم. يمكن استخدام هذه الوظيفة كجزء من طلبات بحث المستخدم، مثلاً لتوجيه شخص إلى نقطة وجهة. يمكن استخدامه أيضًا لوضع علامات جغرافية على بعض المحتوى الذي أنشأه المستخدم، مثل وضع علامة على مكان التقاط صورة. لا تقتصر واجهة برمجة التطبيقات على الأجهزة، ولا يهم كيفية تحديد المتصفح للموقع الجغرافي، طالما أن العملاء يمكنهم طلب بيانات الموقع واستلامها بطريقة عادية. قد تكون الآلية الأساسية عبر نظام تحديد المواقع العالمي (GPS) أو شبكة Wi-Fi، أو عبر طلب فقط من المستخدم إدخال موقعه الجغرافي يدويًا. ونظرًا لأن أيًا من عمليات البحث هذه سيستغرق بعض الوقت، فإن واجهة برمجة التطبيقات غير متزامنة؛ حيث يمكنك تمريرها بطريقة معاودة اتصال كلما طلبت موقعًا.

المثال هنا هو مقياس رحلة يوضح الموقع الأولي ويحافظ على عرض للمسافة التي قطعوها منذ تحميل الصفحة.

الخطوة 1. التحقق من التوافق

يمكنك التحقق بسهولة من التوافق عن طريق اختبار وجود كائن الموقع الجغرافي:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

الخطوة 2. تعريف ملف HTML الخاص بمقياس الرحلة

في هذا المثال، أنت تنشئ عدادًا للرحلة، لذا اذكر محتوى HTML التالي:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

ستستخدم الخطوات القليلة التالية واجهة برمجة التطبيقات Geolocation API لتعبئة كل هذه النطاقات الفارغة.

الخطوة 3. تحديد الموقع الجغرافي الحالي للمستخدم

سيتم إعداد تقرير "getCurrentPosition()" بشكل غير متزامن عن الموقع الجغرافي الحالي للمستخدم. استدعِها بمجرد تحميل الصفحة، حتى تتم تعبئتها بشكل صحيح - وحفظها لوقت لاحق - في موضع البداية:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

إذا كانت هذه هي المرة الأولى التي يطلب فيها أحد التطبيقات على هذا النطاق أذونات، سيتحقّق المتصفّح عادةً من موافقة المستخدم. واعتمادًا على المتصفح، قد تكون هناك أيضًا إعدادات مفضّلة تسمح دائمًا بعمليات البحث عن الأذونات أو عدم السماح بها، وفي هذه الحالة سيتم تجاوز عملية التأكيد.

بعد تنفيذ هذه التعليمة البرمجية، ستتمكن الآن من رؤية موضع البداية. بناءً على جهاز الموقع الذي يستخدمه المتصفح، قد يحتوي كائن الموضع بالفعل على أكثر بكثير من مجرد خطوط الطول والعرض، على سبيل المثال يمكن أن يتضمن ارتفاع أو اتجاه. يمكنك استكشاف المزيد عن طريق تسجيل متغير الموضع في وحدة التحكم.

الخطوة 4. التعامل مع الأخطاء

للأسف، لم تتم جميع عمليات البحث عن الموقع بنجاح. ربما لا يمكن تحديد موقع نظام تحديد المواقع العالمي (GPS) أو أوقف المستخدم عمليات البحث عن الموقع فجأة. سيتم استدعاء وسيطة ثانية اختيارية لـ getCurrentPosition() في حال حدوث خطأ، حتى تتمكن من إشعار المستخدم داخل معاودة الاتصال:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

الخطوة الخامسة. مراقبة الموقع الجغرافي للمستخدم

تم تنفيذ الطلب السابق إلى getCurrentPosition() مرة واحدة فقط عند تحميل الصفحة. لتتبُّع التغييرات، استخدِم "watchPosition()". سترسل هذه الميزة إشعارًا تلقائيًا بدالة معاودة الاتصال كلما تحرك المستخدم:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

الخطوة السادسة. عرض المسافة التي تم قطعها

لا ترتبط هذه الخطوة مباشرةً بواجهة برمجة التطبيقات Geolocation API، ولكنّها في نهاية العرض التوضيحي وتقدّم مثالاً حول كيفية استخدام بيانات الموقع الجغرافي. أضِف سطرًا إضافيًا إلى معالج watchPosition() لملء المسافة المقطوعة:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

تنفِّذ الدالة calculateDistance() خوارزمية هندسية لتحديد المسافة بين إحداثيَين. تمّ تعديل طريقة تنفيذ JavaScript من نص برمجي مقدَّم من Moveable Type بموجب رخصة المشاع الإبداعي.

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}