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

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

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

تستخدم 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;
}
}

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

•  الطلب مرفوض : لم يقم المستخدم بالسماح بخاصية تحديد الموقع .
•  المكان غير متوفر : لا يمكن الحصول على الموقع الحالي .
• انتهاء الوقت : انتهاء وقت العملية .

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

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

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>

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه