JavaScript

Web Geolocation API

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

التاريخ

14 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1215

المواضيع

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

Web Geolocation API

</> Web Geolocation API

Geolocation API : هو عبارة عن API تستخدم في تحديد الموقع الجغرافي للمستخدم 

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


ملاحظة: اعتبارًا من 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.