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

</> Using the Geolocation API

تستخدم الدالة ( )getCurrentPosition في تحديد الموقع الخاص بالمستخدم

- المثال التالي يقوم بتحديد كل من خط الطول والعرض الخاص بوقع المستخدم

Example

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

جربها بنفسك

شرح الكود السابق

اولا نقوم بالتأكد من ان خدمة تحديد الموقع متاحه ام لا
اذا كانت متاحة يتم تنفيذ الدالة ( )getCurrentPosition و في حالة انها غير متاحة يتم طباعة رسالة معينة للمستخدم
تقوم الدالة ( )showPosition بأرجاع نتيجة تحتوي علي خط طول وعرض المستخدم

</> Handling Errors and Rejections

المثال التالي يقوم أيضا بتحديد خط طول وعرض المستخدم ولكن مع تمرير دالة معينه يتم تنفيذها في حالة حدث مشكلة معينة وتعذر بسببها تحديد موقع المستخدم

Example

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;
  }
}

جربها بنفسك

</> Displaying the Result in a Map

لعرض موقع المستخدم علي خريطة تحتاج إلى الوصول إلى خدمة الخرائط معينة، مثل خرائط Google.

في المثال التالي، يتم استخدام خط العرض وخط الطول لإظهار الموقع في خريطة Google (باستخدام صورة ثابتة):

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

</> Location-specific Information

توضح هذه الصفحة كيفية إظهار موقع المستخدم على الخريطة.

يعد تحديد الموقع الجغرافي Geolocation مفيدًا جدًا أيضًا في الحصول علي المعلومات الخاصة بموقع المستخدم مثل

تحديث المعلومات المحلية
إظهار نقاط الاهتمام بالقرب من المستخدم
التنقل خطوة بخطوة (GPS)

</> The getCurrentPosition() Method - Return Data

تقوم دالة getCurrentPosition () بإرجاع object عند نجاح تنفيذها.

يتم دائمًا إرجاع خصائص خط الطول وخط العرض والدقة. ويتم إرجاع الخصائص الأخرى إذا كانت متوفرة:

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

</> Geolocation Object - Other interesting Methods

يضم ال object التالي "Geolocation" علي العديد من الدوال المهمة ومنها التالي

watchPosition ( ) : تقوم بأرجاع الموقع الحالي للمستخدم ويستمر في إرجاع الموقع المحدث أثناء تحرك المستخدم (مثل GPS في السيارة)
clearWatch ( ) : تستخدم في ايقاف عمل الدالة "watchPosition ( ) "

يوضح المثال التالي تنفيذ دالة watchPosition (). وأنت بحاجة إلى جهاز GPS دقيق لاختبار تنفيذها (مثل الهاتف الذكي):

Example

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

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

Web Geolocation API

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Web Geolocation API JavaScript