آموزش پیدا کردن موقعیت یا Location کاربر با Javascript - قسمت 2

- visibility ۲ mode_comment

در جلسه قبل دیدیم که درون شئ navigator.geolocation متدهای زیر قرار گرفته و میتونین ازشون استفاده کنید:

  • Geolocation.getCurrentPosition()
  • Geolocation.watchPosition()
  • Geolocation.clearWatch()

متدهای getCurrentPosition و watchPosition تقریبا به یک صورت مورد استفاده قرار میگیرن. هر دوی اونها بصورت Asynchronous و غیرهمزمان عمل میکنن و برای بدست آوردن اطلاعات موقعیتی کاربر درخواستی رو میفرستن و با توجه به Response یا پاسخی که میگیرن، Callback یا تابعی رو که مشخص کردیم رو اجرا میکنن. اگر نتیجه موفقیت آمیز باشه، تابع مربوط به حالت success اجرا میشه و اگر درخواست با خطا و ارور مواجع بشه، تابع مربوط به error اجرا خواهد شد.

کد زیر یک نمونه کلی از نحوه استفاده از متد getCurrentPosition است. استفاده از متد watchPosition نیز تقریبا به همین صورت هست.

طرح کلی کد بالا بصورت زیر هست:

میبینید که متد getCurrentPosition میتونه 2 ورودی از جنس تابع رو بگیره. استفاده از تابع اول اجباری و استفاده از تابع دوم اختیاری است. تابع اول در مواقعی که درخواست ما با موفقیت انجام بشه، صدا زده میشه و کدهای درون اون اجرا میشه و تابع دوم در زمانی که با ارور مواجه بشیم صدا زده و اجرا میشه. اگر عملیات موفقیت آمیز باشه، تابع اول صدا زده میشه و پارامتر position که یک شئ هست، اطلاعات مورد نظر رو درون خودش ذخیره میکنه و ما میتونیم از اونا استفاده کنیم. قالب شئ position بصورت زیر هست:

میبینید که اطلاعات زیادی به ما داده میشه. حالا یکی یکی این موارد رو با هم بررسی میکنیم. timestamp، زمانی که این اطلاعات دریافت شده اند رو به ما نشون میده و coords هم اطلاعاتی در مورد سیستم مختصات در اختیارمون میزاره. این اطلاعات عبارتند از:

  • latitude : عرض جغرافیایی با واحد درجه اعشاری
  • longitude : طول جغرافیایی با واحد درجه اعشاری
  • altitude : ارتفاع نسبی از سطح دریا با واحد متر
  • accuracy : میزان ممکن برای خطا در مورد طول و عرض جغرافیایی در واحد متر
  • altitudeAccuracy : میزان ممکن خطا برای altitude در واحد متر
  • heading : جهت دستگاه نسبت به شمال جغرافیایی در واحد درجه
  • speed : سرعت حرکت دستگاه در واحد متر بر ثانیه رو نشون میده

بعضی از موارد بالا فقط برای گوشی های موبایل و در حالت GPS قابل استفاده هستند و زمانی که از WiFi استفاده میکنیم، بعضی از موارد رو null دریافت میکنیم. در همه موارد به latitude و longitude دسترسی خواهیم داشت.یک نمونه از حالت success بصورت زیر هست:

اگر اروری هم داشته باشیم، تابع دوم صدا زده میشه و پارامتر error دارای موارد زیر خواهد بود:

درون code، کد مربوط به خطای رخ داده قرار میگیره که یکی از موارد زیر میتونه باشه:

  • 1 : زمانی که کاربر اجازه نده و درخواست رو block کنه، این حالت به وجود میاد
  • 2 : زمانی که موقعیت فعلی قابلیت دسترسی بهش وجود نداشته باشه
  • 3 : مواقعی که مقدار زمان زیادی میگذره و نتیجه ای دریافت نمیشه، این حالت به وجود میاد

درون ویژگی message هم یک متن که کاربر با خوندن اون متوجه ارور میشه، قرار میگیره. یک نمونه ارور در Console بصورت زیر هست:

میبینید که استفاده از Geolocation API خیلی راحت و سرراست هست.

بدلیل اینکه Geolocation API به اطلاعات محرمانه کاربر دسترسی داره، زمانی که یک سایت اون رو درخواست میکنه، حتما باید مورد تایید کاربر قرار بگیره و در غیر اینصورت و اگر کاربر اون رو block کنه، دیگه نمیتونین به اطلاعات موقعیتی دسترسی داشته باشید.

اولین باری که یک سایت میخواد به اطلاعات دسترسی داشته باشه، این پیام نشون داده میشه و هر چیزی که انتخاب کنید، برای دفعات بعدی نیز همون انتخاب میشه و دیگه ازتون نمیپرسه. اگر نیاز دارید که تحت شرایط خاصی دوباره از کاربر این اجازه رو درخواست کنید، میتونین این لینک رو مطالعه کنید.

طبق عکسی که در جلسه قبل قرار گرفت، بیشتر مرورگرها دارن به سمتی میرن که فقط به سایتهایی که HTTPS هستند، اجازه استفاده از Geolocation API داده میشه.

میتونین در مورد این موضوع نیز این لینک رو مطالعه کنید.

همونطور که دیدید تا اینجا به راحتی تونستیم اطلاعات موقعیتی نظیر latitude و longitude رو بدست بیاریم. حالا میتونیم به راحتی با استفاده از ابزار GMap اون رو بر روی نقشه گوگل یا Google Maps نمایش بدیم. دموی زیر رو ببینید:

تب Result رو باز کنید تا نتیجه نهایی رو ببینید. یک دکمه بنام Find My Location وجود داره و زمانی که بر روی اون کلیک میکنید، یک اجازه از شما گرفته میشه و اگر اون رو Accept کنید، موقعیت فعلی شما بر روی نقشه گوگل نمایش داده میشه. برای دیدن کدهای این دمو، میتونین به تبهای HTML و CSS و Javascript برید. کد اصلی نمونه بالا بصورت زیر هست:

میبینید زمانی که بر روی دکمه مورد نظر کلیک میشه، درخواست فرستاده میشه و اطلاعات مربوط به طول و عرض جغرافیایی رو دریافت میکنیم و اونا رو به ابزار GMap میدیم و اون هم نقشه رو به ما نشون میده و در اون نقطه یک نشانگر یا Marker رو اضافه میکنه.

به همین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
mohsen mandegar

ممنون خیلی خوب بود

محمد اسفندیاری

خواهش میکنم موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.