تحديد الموقع الجغرافي في HTML5

يستخدم تعرف الموقع الجغرافي في HTML5 للتعرف على موقع المستخدم.

تجربة شخصية: عرض موقعك على خريطة جوجل

تحديد موقع المستخدم

يستخدم API تعرف الموقع الجغرافي في HTML5 للحصول على موقع المستخدم.

鉴于 هذه الخاصية قد تشكل انتهاكًا للخصوصية الشخصية للمستخدم، فإن معلومات موقع المستخدم غير متاحة إلا إذا وافق المستخدم.

دعم المتصفح

Internet Explorer 9، Firefox، Chrome، Safari و Opera يدعمون التعرف على الموقع الجغرافي.

التعليقات:بالنسبة للأجهزة المزودة بـ GPS مثل iPhone، التعرف على الموقع الجغرافي أكثر دقة.

HTML5 - استخدام التعرف على الموقع الجغرافي

استخدم متدخل getCurrentPosition() للحصول على موقع المستخدم.

المثال التالي هو مثال بسيط للتعرف على الموقع الجغرافي، يمكنه العودة إلى الطول والعرض للمستخدم.

مثال

<script>
var 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="خط العرض: " + position.coords.latitude +
  "<br />خط العرض: " + position.coords.longitude;
  }
</script>

تجربة شخصية

شرح المثال:

  • كشف ما إذا كان الدعم متاحًا للتعرف على الموقع الجغرافي
  • إذا كان الدعم متاحًا، يتم تشغيل متدخل getCurrentPosition(). وإذا لم يكن متاحًا، يتم عرض رسالة على المستخدم.
  • إذا تم تشغيل getCurrentPosition() بنجاح، فإنه يعود إلى الدالة المعينة في المعامل showPosition بنموذج coordinates
  • تعليمات function showPosition() تحصل وتعرض الطول والعرض

النموذج المقدم هو برنامج أساسي جدًا للتعرف على الموقع الجغرافي، لا يحتوي على معالجة الأخطاء.

معالجة الأخطاء والرفض

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

مثال

function showError(error)
  {
  switch(error.code)
    {
    حالة error.PERMISSION_DENIED:
      x.innerHTML="طلب الموقع الجغرافي تم رفضه من قبل المستخدم."
      break;
    حالة error.POSITION_UNAVAILABLE:
      x.innerHTML="المعلومات المكانية غير متاحة."
      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;
    }
  }

تجربة شخصية

كود الخطأ:

  • Permission denied - لم يتم السماح للمستخدم بالتحديد الجغرافي
  • الموقع غير متاح - لا يمكن الحصول على الموقع الحالي
  • Timeout - تم تجاوز وقت الاستجابة للعملية

عرض النتائج على الخريطة

لعرض النتائج على الخريطة، تحتاج إلى زيارة خدمة الخريطة التي يمكن استخدامها للطول والعرض، مثل خريطة جوجل أو خريطة بaidu:

مثال

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

تجربة شخصية

في المثال السابق، استخدمنا البيانات الجغرافية العائدة للطول والعرض لعرض الموقع على خريطة جوجل (استخدام صورة ثابتة).

سكربتات خرائط جوجل

الرابط أعلاه يوضح كيفية استخدام السكربت لعرض خريطة تفاعلية تحتوي على خيارات علامات، التكبير والسحب.

معلومات الموقع المحدد

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

مثال:

  • تحديث المعلومات المحلية
  • عرض النقاط المثيرة للاهتمام حول المستخدم
  • نظام التوجيه في السيارة التفاعلي (GPS)

طريقة getCurrentPosition() - البيانات المنظورة

إذا كانت النتيجة ناجحة، فإن طريقة getCurrentPosition() تعود بمثابة عنصر. ستكون دائمًا latitude، longitude وaccuracy من الصفات. إذا كانت متاحة، ستكون هناك صفات أخرى.

الصفات الوصف
coords.latitude الطول المطلق للخطوط الطولية
coords.longitude الطول المطلق للخطوط العرضة
coords.accuracy دقة الموقع
coords.altitude الارتفاع، فوق مستوى سطح البحر بالأمتار
coords.altitudeAccuracy دقة ارتفاع الموقع
coords.heading اتجاه، من الشمال المطلق بالدرجات
coords.speed السرعة، بمتر/ثانية
timestamp التاريخ والوقت المستجيب

مثل Geolocation - طرق مثيرة للاهتمام أخرى

watchPosition() - تعود إلى موقع المستخدم الحالي وتستمر في العودة إلى تحديث المواقع عند تحرك المستخدم (مثل GPS في السيارة).

clearWatch() - تتوقف طريقة watchPosition()

السطر التالي يظهر كيفية استخدام طريقة watchPosition(). تحتاج إلى جهاز GPS دقيق لتجربة هذا المثال (مثل iPhone):

مثال

<script>
var 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="خط العرض: " + position.coords.latitude +
  "<br />خط العرض: " + position.coords.longitude;
  }
</script>

تجربة شخصية