دروس HTML

صفحة HTML الرئيسية مقدمة HTML محرري HTML أساسيات HTML عناصر HTML سمات HTML عناوين HTML فقرات HTML أنماط HTML تنسيق HTML اقتباسات HTML تعليقات HTML ألوان HTML HTML CSS روابط HTML صور HTML رمز HTML المفضل جداول HTML قوائم HTML كتلة HTML ومضمنة فئات HTML معرف HTML إطارات HTML IFrame HTML جافا سكريبت مسارات ملفات HTML رئيس HTML تنسيق HTML مستجيب لـ HTML HTML Computercode دلالات HTML دليل نمط HTML كيانات HTML رموز HTML HTML Emojis أحرف HTML تشفير عنوان URL لـ HTML HTML مقابل XHTML

نماذج HTML

نماذج HTML سمات نموذج HTML عناصر نموذج HTML أنواع مدخلات HTML سمات إدخال HTML سمات نموذج إدخال HTML

رسومات HTML

قماش HTML HTML SVG

وسائط HTML

وسائط HTML فيديو HTML صوت HTML المكونات الإضافية لـ HTML HTML يوتيوب

واجهات برمجة تطبيقات HTML

HTML تحديد الموقع الجغرافي سحب / إسقاط HTML تخزين الويب HTML عمال ويب HTML HTML SSE

أمثلة HTML

أمثلة HTML مسابقة HTML تمارين HTML شهادة HTML ملخص HTML ولوجية HTML

مراجع HTML

قائمة علامات HTML سمات HTML سمات HTML العامة دعم متصفح HTML أحداث HTML ألوان HTML قماش HTML صوت / فيديو HTML أنماط HTML مجموعات أحرف HTML تشفير عنوان URL لـ HTML أكواد HTML لانج رسائل HTTP طرق HTTP PX to EM Converter اختصارات لوحة المفاتيح

واجهة برمجة تطبيقات تحديد الموقع الجغرافي بتنسيق HTML


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


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

يتم استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي بتنسيق HTML للحصول على الموقع الجغرافي للمستخدم.

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

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


دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم تحديد الموقع الجغرافي بشكل كامل.

API
Geolocation 5.0 - 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

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


باستخدام HTML تحديد الموقع الجغرافي

يتم 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 = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

شرح المثال:

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

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



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

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

مثال

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

معلومات خاصة بالموقع

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

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

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

طريقة getCurrentPosition () - إرجاع البيانات

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

Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

كائن تحديد الموقع الجغرافي - طرق أخرى مثيرة للاهتمام

يحتوي كائن تحديد الموقع الجغرافي أيضًا على طرق أخرى مثيرة للاهتمام:

  • watchPosition() - يُرجع الموقع الحالي للمستخدم ويستمر في إرجاع الموضع المحدث أثناء تحرك المستخدم (مثل GPS في السيارة).
  • clearWatch()- يوقف watchPosition()الطريقة.

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

مثال

<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 = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>