سبد (0)

سیستم موقعیت یاب جهانی HTML5

سیستم موقعیت یاب HTML5 برای پیدا کردن موقعیت یک کاربر استفاده می شود.

سیستم موقعیت یاب جهانی HTMl5

بوسیله سیستم موقعیت یاب جهانی Html5 می توانید مختصات و موقعیت جغرافیایی یک کاربر را پیدا کرده و به وی نمایش دهید. این سیستم از اطلاات ماهواره ها و ISP ای که به آن متصل هستید، برای اطلاع از موقعیت شما استفاده می کند.

از آنجایی که موقعیت یابی می تواند حریم خصوصی کاربر را تحت تاثیر قرار دهد، موقعیت وی تا زمانی که خودش تایید نکند، در اختیار برنامه قرار نخواهد گرفت.

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari سیستم موقعیت یاب HTML5 را پشتیبانی می کنند.

توجه: سیستم موقعیت یاب HTML5 در دستگاه هایی که دارای GPS هستند (مانند iPhone) دقیق تر کار می کند.

اطلاع از موقعیت کنونی کاربر

از متد ()getCurrentPosition برای اطلاع از موقعیت کنونی کاربر استفاده می شود.

مثال زیر یک کد ساده موقعیت یابی را نشان می دهد که بوسیله آن عرض و طول جغرافیایی مکان کاربر را بر روی صفحه، نمایش می دهد:

مثال (سیستم موقعیت یاب جهانی HTML5)

<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>
خودتان امتحان کنید »

توضیح مثال:

  • در مرحله اول چک شده که آیا مرورگر از سیستم موقعیت یاب در HTML پشتیبانی می کند یا خیر و در صورت لزوم کد های مناسب اجرا می شود.
  • اگر مرورگر از این سیستم پشتیبانی کند، متد ()getCurrentPosition اجرا شده و در غیر این صورت یک پیام هشدار مبنی بر عدم پشتیبانی مرورگر صادر می شود.
  • اگر متد ()getCurrentPosition با موفقیت اجرا شود، مختصات نقطه قرارگیری کاربر را بوسیله یک پارامتر به تابع ()ShowPosition برمی گرداند.
  • تابع ()ShowPosition طول و عرض جغرافیایی کاربر را در خروجی نمایش می دهد.

مثال فوق کد ساده یک عملیات موقعیت یابی بدون امکان خطا یابی بود و در بخش بعد نحوه خطا یابی در این سیستم را آموزش می دهیم.

مدیریت خطاها و عدم جوابگویی سیستم

ممکن است در فرایند موقعیت یابی، خطا هایی رخ دهد. از پارامتر دوم متد ()getCurrentPosition می توان برای مدیریت خطا های احتمالی استفاده کرد.

این پارامتر یک تابع را تعیین می کند تا در صورت بروز خطا، اجرا شده و پیام لازم را به کاربر نمایش دهد:

مثال (سیستم موقعیت یاب جهانی HTML5)

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;
}
}
خودتان امتحان کنید »

توضیح کد:

  • PERMISSION_DENIED: در این حالت کاربر اجازه دسترسی به موقعیت یابی را نداده است.
  • POSITION_UNAVAILABLE: در این حالت یافتن موقعیت صحیح کاربر به علت مشکلات فنی ممکن نیست.
  • TIMEOUT: در این حالت مدت زمان لازم برای اجرای درخواست تمام شده است.
  • UNKNOWN_ERROR: خطای ایجاد شده نا مفهوم است.

نمایش موقعیت کاربر بر روی یک نقشه

برای نمایش موقعیت کاربر بر روی یک نقشه، به یک سرویس دهنده مانند Google Maps نیاز دارید:

مثال (سیستم موقعیت یاب جهانی HTML5)

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+"'>";
}
خودتان امتحان کنید »

در مثال بالا، از طول و عرض جغرافیایی برای نمایش موقعیت کاربر در Google Maps استفاده شده است. (از یک عکس استاتیک استفاده شده است)

Google Map Script
در این مثال، چگونگی نمایش یک نقشه تعاملی تر با ابزارهای zoom ،drag و marker نشان داده شده است.

داده هایی که متد ()getCurrentPosition برمی گرداند

اگر متد ()getCurrentPosition با موفقیت اجرا شود، یک شیء برمی گرداند. خصوصیت های latitude ,longitude و accuracy همیشه برگردانده می شوند. در جدول زیر دیگر خصوصیت های این شیء آورده شده است:

خصوصیت توضیحات
coords.latitude

عرض جغرافیایی
coords.longitude

طول جغرافیایی
coords.accuracy

دقت و درستی مکان کاربر
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response

متدهای دیگر شیء geolocation

متد ()watchPosition: مکان فعلی کاربر را برمی گرداند و در صورت جابه جا شدن کاربر، داده را تازه سازی می کند. (مانند دستگاه GPS در یک خودرو)

متد ()clearWatch: باعث توقف متد ()watchPosition می شود.

در مثال زیر، متد ()watchPosition، نشان داده شده است. برای تست این مثال، به یک دستگاه GPS دقیق نیاز دارید: (مانند iPhone)

مثال (سیستم موقعیت یاب جهانی HTML5)

<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>
خودتان امتحان کنید »
نوشته شده توسط امیر پهلوان صادق
بازدید: 26351

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه