53- واجهة برمجة تطبيقات تحديد الموقع الجغرافي (Geolocation API) في HTML

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

تسمح هذه الواجهة للمواقع الإلكترونية وتطبيقات الويب بالوصول إلى معلومات الموقع الجغرافي للمستخدم، مثل خطوط الطول والعرض، وذلك باستخدام مصادر مثل عنوان IP أو GPS أو شبكات Wi-Fi القريبة.

تتطلب هذه الواجهة موافقة المستخدم قبل مشاركتها موقعه، وذلك للحفاظ على الخصوصية.

دعم المتصفحات لواجهه برمجة تطبيقات تحديد الموقع الجغرافي (Geolocation API)

توضح الأرقام في الجدول أدناه أول إصدار من المتصفحات المختلفة الذي يدعم واجهة برمجة تطبيقات تحديد الموقع الجغرافي بشكل كامل:

ملاحظة مهمة:

• اعتبارًا من إصدار Chrome 50، تعمل واجهة برمجة تطبيقات تحديد الموقع الجغرافي فقط على السياقات الآمنة مثل HTTPS.
• لن تعمل طلبات الحصول على موقع المستخدم إذا كان موقعك مستضافًا على أصل غير آمن (مثل HTTP).

لذا، من المهم استخدام HTTPS لضمان عمل واجهة برمجة التطبيقات هذه بشكل صحيح وحماية خصوصية المستخدمين.

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

يُستخدم التابع getCurrentPosition() للحصول على موقع المستخدم الجغرافي.

يعرض المثال التالي خط العرض وخط الطول لموقع المستخدم:

كود المثال:

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

شرح الكود:

1. التحقق من دعم المتصفح:
   • يتحقق الكود أولاً مما إذا كان المتصفح يدعم واجهة برمجة تطبيقات تحديد الموقع الجغرافي باستخدام خاصية navigator.geolocation.
2. طلب إذن المستخدم:
   • إذا كان المتصفح يدعم هذه الواجهة، يقوم الكود بطلب إذن المستخدم للحصول على موقعه باستخدام التابع navigator.geolocation.getCurrentPosition().
3. إرجاع معلومات الموقع:
   • إذا وافق المستخدم، يقوم التابع بإرجاع معلومات الموقع الجغرافي في صورة كائن يحتوي على خصائص مثل latitude (خط العرض) وlongitude (خط الطول).
4. عرض النتائج:
   • يتم تمرير كائن الموقع إلى التابع showPosition()، والذي يقوم بدوره بعرض خط العرض وخط الطول على الصفحة.

ملاحظة: هذا مثال بسيط للغاية لكيفية استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي، ولا يتضمن أي معالجة للأخطاء.

معالجة الأخطاء والرفض في واجهة برمجة تطبيقات تحديد الموقع الجغرافي (Geolocation API)

تُستخدم المعلمة الثانية في التابع getCurrentPosition() للتعامل مع الأخطاء. حيث تحدد هذه المعلمة تابعاً لتنفيذه في حال فشل الحصول على موقع المستخدم.

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

معلومات خاصة بالموقع

واجهة برمجة تطبيقات تحديد الموقع الجغرافي (Geolocation API) مفيدة أيضًا لعرض معلومات خاصة بالموقع، مثل:

• معلومات محلية محدثة: يمكنك استخدام موقع المستخدم لعرض معلومات محلية مناسبة له، مثل الطقس المحلي أو الأخبار المحلية.
• عرض أماكن الاهتمام القريبة: يمكنك استخدام موقع المستخدم لعرض قائمة بالأماكن القريبة مثل المطاعم أو المتاجر أو المعالم السياحية.
• الملاحة الصوتية (GPS): يمكنك استخدام موقع المستخدم لتوفير توجيهات ملاحة صوتية للمستخدم تساعده على الوصول إلى وجهته.

بيانات الإرجاع في التابع getCurrentPosition()

عند نجاح التابع getCurrentPosition()، فإنه يُرجع كائنًا يحتوي على معلومات الموقع الجغرافي. يتم دائمًا إرجاع خصائص خطوط العرض وخطوط الطول ودقة الموقع، بينما يتم إرجاع الخصائص الأخرى إذا كانت متوفرة:

طرق أخرى مفيدة في كائن Geolocation

يتضمن كائن Geolocation أيضًا طرقًا أخرى مفيدة:

• watchPosition(): يُستخدم هذا التابع للحصول على موقع المستخدم الحالي، كما يستمر في إرجاع الموقع المحدث أثناء تحرك المستخدم (مثل نظام GPS في السيارة).
• clearWatch(): يُستخدم هذا التابع لإيقاف التابع watchPosition().

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>