واجهة تحديد الموقع شبكة الويب

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

يستخدم API Geolocation في HTML للحصول على موقع المستخدم.

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

جرب بنفسك

التعليق:تكون الجغرافيا أكثر دقة للاجهزة المزودة بجهاز تتبع GPS (مثل الهواتف الذكية).

دعم جميع المتصفحات لـ API الجغرافيا:

Chrome IE Firefox Safari Opera
دعم دعم دعم دعم دعم

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

استخدام API الجغرافيا

getCurrentPosition() يُستخدم هذا الطريقة لعرض موقع المستخدم

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

مثال

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "دعم تحديد الموقع غير متاح في هذا المتصفح.";
  }
}
function showPosition(position) {
  x.innerHTML = "خط الطول: " + position.coords.latitude +
  "<br>خط العرض: " + position.coords.longitude;
}
</script>

جرب بنفسك

شرح المثال:

  1. تحقق من دعم Geolocation
  2. إذا كانت دالة getCurrentPosition() مدعومة، فتقوم بتشغيلها. وإذا لم تكن مدعومة، فتعرض رسالة إلى المستخدم
  3. إذا نجح طريقة getCurrentPosition()، فإنها تعود إلى دالة معينة (showPosition) المحددة كمعامل
  4. يخرج دالة showPosition() عرض خط العرض والطول

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

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

getCurrentPosition() الparameter الثاني للمتدخل يُستخدم لمعالجة الأخطاء. إذا لم يتمكن من الحصول على موقع المستخدم، فإنه يحدد الدالة التي يجب تشغيلها:

مثال

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

جرب بنفسك

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

إذا كنت ترغب في عرض النتائج على الخريطة، يجب عليك زيارة خدمة الخريطة، مثل Google Maps.

في المثال التالي، يتم استخدام الطول والعرض العودة لعرض الموقع على خريطة 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+"'>";
}

معلومات الموقع

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

Geolocation أيضًا مفيدة جدًا للمعلومات المتعلقة بالموقع، مثل:

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

طريقة getCurrentPosition() - العودة ببيانات

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

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

Geolocation Object - الطرق المثيرة للاهتمام

Geolocation Object يحتوي أيضًا على بعض الطرق المثيرة للاهتمام:

  • watchPosition() - عودة موقع المستخدم الحالي، واستمرار عودة المواقع المعدلة مع تحرك المستخدم (مثل GPS في السيارة).
  • clearWatch() - توقف طريقة watchPosition ().

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

مثال

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "دعم تحديد الموقع غير متاح في هذا المتصفح.";
  }
}
function showPosition(position) {
  x.innerHTML = "خط الطول: " + position.coords.latitude +
  "<br>خط العرض: " + position.coords.longitude;
}
</script>

جرب بنفسك