یافتن موقیعت مکانی با استفاده از جاوااسکریپت
این روزها ایدههای زیادی باب شدن که اساس اونها بر موقیعت مکانی کاربرانشون هست، مثل پیدا کردن نقشه و یا پیدا کردن بهترین مسیر برای رفتن به نقطهای از شهر، یا گرفتن تاکسی، یا خرید از سوپر مارکت، یا ارسال بسته و … که همگی از قابلیت اشتراک گذاری موقیعت مکانی دستگاههای کاربرانشون بهره میبرن.
به همین جهت قراره که نگاهی کنیم به قابلیت تشخیص موقیعیت مکانی که اکثر مرورگرهای تازه در اختیارمون قرار میدن.
API موقیعت مکانی
geolocation API ابزاریه که این امکان رو برای کاربر فراهم میکنه تا موقیعت مکانی خودش رو با یک نرمافزار تحت وب به اشتراک بگذاره، این ابزار از سه منبع مختلف (GPS, Wifi, IP Geolocation) که در تمام دستگاههای همراه وجود داره استفاده میکنه البته این رو هم در نظر بگیرید که اولویت با GPS است و بعد Wifi و در صورتی که این دو منبع وجود نداشتن و یا به هر دلیلی با مشکل مواجه شدن، از ip برای بدست آوردن موقیعت مکانی کاربر استفاده میشه که البته این روش قابل اعتماد نیست و احتمال رسیدن به دادههای غلط خیلی زیاده.
من کجام
قبل از رسیدن به جواب این سوال بیایم ببینیم که آیا مرورگر ما اصلا از این API پشتیبانی میکنه یا خیر؟ برای این کار از قطعه کد زیر استفاده میکنیم:
if (!navigator.geolocation) { // geolocation is not supported alert(" مرورگر شما از این قابلیت پشتیبانی نمیکنه "); } // geolocation is available // navigator.geolocation.getCurrentPosition(success,error);
خوب اگه از یک مرورگر تازه استفاده میکنید تا الان که مشکلی نداشتید.
اولین متدی که قراره با هم اون رو بررسیش کنیم getCurrentPosition است. همونطور که از اسمش پیداست موقیعت مکانی فعلی ما رو به ما برمیگردونه. البته به این شکل که تابعی رو به شکل callback دریافت میکنه و قابلیتهایی رو در اختیار ما قرار میده.
خب برسیم به جواب سوال خودمون من کجام؟ یک فایل ساده index.html بسازید و داخل تگ script شروع به نوشتن کدهای زیر کنید. توجه کنیدکه اول از همه قراره یاد بگیریم اون قابلیتهایی که گفتیم متد getCurrentPosition در اختیارمون میگذاره چه قابلیتهایی هستند؟ و این که پارامتر دوم (error) چی هست؟ به قطعه کد زیر توجه کنید:
if (!navigator.geolocation) { // geolocation is not supported alert("مرورگر شما از این قابلیت پشتیبانی نمیکنه:("); } // geolocation is available function success(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; } function error(){ alert("نمیتونم اطلاعات مورد نیازم رو دریافت کنم :("); } navigator.geolocation.getCurrentPosition(success,error);
خب تابع error که به عنوان پارامتر دوم به متد getCurrentPosition ارسال کردیم همونطور که از اسمش برمیاد، به این شکل عمل میکنه که اگر به هر دلیلی اطلاعات شما به دست getCurrentPosition نرسید شما میتونید پیغامی رو برای کاربرتون ارسال کنید یا نه فقط داخل console خودتون رو از این موضوع آگاه کنید. البته که این کار الزامی نداره و میتونه پارامتر دوم اصلا ارسال نشه.
اما latitude و longitude به ترتیب عرض جغرافیایی و طول جغرافیایی هستند. دقت کنید تابع success پارامتری رو در اختیارمون قرار میده که به واسطهی اون میتونیم به قابلیتهایی که بالاتر گفتم دسترسی داشته باشیم. در اینجا من از طول و عرض جغرافیایی استفاده کردم اما قابلیتهای دیگهای رو هم به ما میده مثل:
speed سرعت دستگاه، heading جهت دستگاه نسبت به شمال، altitude ارتفاع از سطح دریا، accuracy خطای احتمالی و altitudeAccuracy خطای احتمالی (نسبت سطح از دریا).
اما برگردیم به کار خودمون، میخوایم به واسطه google map، یک screen shot از موقیعت مکانی خودمون بگیریم به شکلی که زمان اجرای فایل index.html موقیعت فعلی خودمون رو مشاهده کنیم. برای این کار کافیه عرض و طول جغرافیای که تا الان بدستش آوردیم رو به google API بدیم و اون هم عکسی با اندازه دلخواه از موقیعت مکانی فعلیمون به ما بده. این سه خط کد بعد از کدهای مربوط به گرفتن طول و عرض جغرافیایی که تا الان نوشتید اضافه کنید:
var img = new Image(); img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; document.body.appendChild(img);
خب اگه همین الان داخل مرورگر کد خودتون رو اجرا کنید با یک همچین تصویری مواجه میشید. (البته مرورگرتون برای فرستادن اطلاعات موقیعت مکانی از شما اجازه میخواد که باهاش همکاری کنید)
اگه به هر دلیلی با کدهایی که تا الان نوشتید به مشکلی برخوردید، میتونید از طریق این لینک کدهاتون رو با اونهایی که تا الان نوشته شده مقایسه کنید.
خب تا اینجا فهمیدیم چطور میتونیم اطلاعات مورد نیازمون رو دریافت کنیم، و این نکته رو هم یادآور بشم که شما میتونید با کلی کتابخونه دیگه و به واسطه همین اطلاعاتی که این API در اختیارتون قرار میده تعامل داشته باشید و کلی چیزای باحال بسازید برای نمونه Gmaps.js که API برای گوگل مپ هست و میتونید خیلی راحت ازش استفاده کنید و از ویژگیهای مثل zoom کردن یا حرکت میون نقشه و … استفاده کنید.
دیگر متدهای API موقیعت مکانی
متد Geolocation.watchPosition و Geolocation.clearWatch دو متد دیگهای هستند که از طریق geolocation API میتونیم ازشون استفاده کنیم. متد اول، منتظره که بلافاصله بعد از تغییر موقیعت کاربرمون تابعی رو که بهش دادیم رو اجرا کنه (اصطلاحا به اینکار listen کردن یک رویداد میگن). و متد دوم هم در ادامهیِ متد قبلی این انتظار رو متوقف میکنه و تابعی که در متد اول در حال اجرا است متوقف میشه.
امنیت
یادتون هست کمی بالاتر زمانی که خواستیم برنامهمون رو اجرا کنیم مرورگر از ما اجازه خواست و بعد اطلاعات رو به نرمافزار مون داد؟ مرورگرهای ما به ارتباطهای غیر امن این اجازه رو نمیدن که به اطلاعاتی مثل موقیعت مکانی دستیابی داشته باشن و برای این منظور لازمه که ارتباط ما به شکل امن توسط HTTPS اتفاق بیافته و یا نرمافزاری که در اونها اجرا میکنیم با یک هاست محلی (localhost) این درخواست رو به مرورگر ما بدن. و این یک ویژگی خیلی خوبه که از به سرقت رفتن اطلاعات کاربرمون جلوگیری میکنه.
حرف آخر
پیشنهاد میشه حتما با متدهای مختلف این API حتی به شکل تفریح هم که شده کار کنید و چیزی بسازید. از اونجایی که مرورگر شما احتیاج به یک ارتباط امن داره تا اجازه کار کرد این API رو در اختیارتون بگذاره پیشنهاد میکنم داخل موبایل یا تبلت (با کپی کردن فایل html یا استفاده از Xcode در سیستم عامل مک). برنامههاتون رو تست کنید و برای نمونه ببنید که قابلیتهایی مثل سرعت یا فاصله از سطح دریا چطور کار میکنن. پیشنهاد میشه درس ۲۱ام از این دوره رایگان سیروزه رو یک نگاهی بهش بیاندازید. در انتها امیدوارم که مطلب مفید بوده باشه خسته نباشید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.