عداد رحلات بسيط يستخدم Geolocation API

Michael Mahemoff

مقدمة

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

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

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

Browser Support

• 5
• 12
• 3.5
• 5

Source

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

// 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>

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

الخطوة 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
});
};

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

تم تنفيذ الاستدعاء السابق للدالة 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;
}