More

[ دورة HTML5 ] الدرس العاشر – تحديد الموقع الجغرافي

تستخدم HTML5 تقنية الموقع الجغرافي لتحديد مكان المستخدم .


تحديد مكان المستخدم

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


المتصفحات الداعمة

تعتبر هذه الخاصية مدعومة من جميع المتصفحات الحديثة من Internet Explorer 9 و Firefox Chrome و Safari و Opera .
ملاحظة : تستخدم خاصية تحديد المكان الجغرافي بشكل أفضل على الهواتف الذكية التي تحتوي على GPS مثل هواتف أي فون .


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

يمكن استخدام تحديد الموقع الجغرافي من خلال الدالّة 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>

شرح المثال السابق

  •  يتم الفحص اذا كان المتصفح يدعم Geolocation .
  • اذا كان يدعم هذه الخاصية عندها سيعمل getCurrentPosition() و اذا لم يكن يدعم عندها ستظهر رسالة للمستخدم .
  •  اذا كانت الطريقة getCurrentPosition() ناجحة عندها سيتم تحديد الاحداثيات و ارسالها الى الدالّة المحددة في showPosition .
  •  سيتقوم الدالّة showPosition() بتحديد و إظهار خطوط الطول و العرض للموقع .

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


التعامل مع الأخطاء و رفض الطلب

يقوم البارامتر الثاني في getCurrentPosition() بتحديد الأخطاء الموجودة في الكود كما أنها تقوم بتشغيل الدالّة في حال فشلت في الحصول على موقع المستخدم .
مثال

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="رفض المستخدم تحديد مموقعه"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="معلومات الموقع الجغرافي غير متوفرة"
break;
case error.TIMEOUT:
x.innerHTML="انتهى طلب الحصول على "
break;
case error.UNKNOWN_ERROR:
x.innerHTML="حدث خطأ غير معروف"
break;
}
}

أنواع كود الأخطاء

  •  الطلب مرفوض : لم يقم المستخدم بالسماح بخاصية تحديد الموقع .
  •  المكان غير متوفر : لا يمكن الحصول على الموقع الحالي .
  • انتهاء الوقت : انتهاء وقت العملية .
READ  السيريال الاصلي مجانى لتحميل لعبة Resident Evil HD Remaster Steam من ادد فاست وحصرياً

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

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

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

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

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

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

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

استخدام الدالّة getCurrentPosition() لجلب البيانات

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

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

طرق أخرى مفيدة لتحديد الموقع الجغرافي

يمكن استخدام watchPosition() لاسترجاع الموقع الحالي للمستخدم و يستمر ليسترجع الموقع الجديد للمستخدم في حال انتقاله الى موقع آخر .
يمكن استخدام clearWatch() و ذلك لإيقاف عمل watchPosition() .
مثال

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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline