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

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>

ستستخدِم الخطوات القليلة التالية واجهة برمجة التطبيقات 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;
}