Web Geolocation API

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

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

Using the Geolocation API

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

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

Example

HTML

<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

HTML

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 (باستخدام صورة ثابتة):

HTML

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

HTML

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

جرّب بنفسك

Web Geolocation API