آموزش رایگان ساخت برنامه نمایش موقعیت مکانی کاربر با جاوا اسکریپت

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

تشخیص موقعیت مکانی کاربران وبسایتمون بنا به دلایل مختلفی میتونه اهمیت داشته باشه، شاید بخواهیم بر اساس موقعیت جغرافیایی کاربران، محتوای متفاوت یا نمایش محتوا بر اساس زبان مادری کاربر رو بهش نمایش بدهیم، که برای دستیابی به این هدف 2 مورد پیش رو داریم:

1. استفاده از Geolocation API
2. جستجو بر اساس IP address

استفاده از Geolocation API:

یک ویژگی جدید در HTML5 هستش که به مشاهده کنندگان یک سایت اجازه میده location خود را به اشتراک بزارند و زمانی که بخواهیم با استفاده از این API مکان کاربر رو بگیریم، یک اعلانی به کاربر نمایش داده میشه و از کاربر سوال میشه که آیا دوست داری موقعیت مکانی خودت رو با این سایت به اشتراک بگذاری یا نه، که کاربر اگر دوست داشته باشه روی گزینه Allow کلیک میکنه.

این API روی پرتکل های امن https کار میکنه و در Internet Explorer 10 و  OperaMini نمی توانیم از این API استفاده کنیم چون از این مرورگرها پشتیبانی نمیکنه.

با استفاده از این API تنها می تونیم به مختصات یا همون coordinates کاربر دست پیدا کنیم که بدست آوردن عدد مختصات طولی و عرضی جغرافیایی کاربر به تنهایی کاری برامون انجام نمیده، بلکه باید از یکسری سرویس های رایگان یا پولی با توجه به نیازمون استفاده کنیم، که این سرویس ها مثل nominatim.org با دادن مختصات اطلاعات خوبی رو با فرمت هایی مانند JSON ، XML ، CSV در اختیارمون قرار میده و برای اینکه نحوه استفاده از این سرویس ها رو به خوبی درک کنیم، بهتره مستندات اون ها رو بخونیم.

در این آموزش رایگان مورد اول یعنی استفاده از Geolocation API رو مورد بررسی قرار میدیم که با استفاده از این Geolocation API که یک ویژگی جدید HTML5 هستش مختصات طولی و عرضی کاربر رو بدست می آوریم و بعدش وارد سایت nominatim.org میشیم و از API ای که این سایت در اختیارمون قرار داده استفاده می کنیم و با استفاده از جاوا اسکریپت مقادیر داینامیک رو در فضای مشخص قرار می دهیم و زمانی که برنامه اجرا بشه ابتدا از کاربر اجازه میگیره و اگر اجازه داده می تونیم به موقعیت مکانی کاربر دست پیدا کنیم حالا با بدست آوردن موقعیت مکانی کاربر می تونیم عملیات دیگه ای که در نظر داریم رو انجام بدیم.

توضیحات بیشتر رو در آموزش گفتم که برای مشاهده و دریافت رایگان سورس پروژه، دکمه های مربوطه رو در ابتدای مقاله قرار دادم، کلیک کنید و از آموزش نهایت استفاده رو ببرید.