آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 18) - رویدادها در Google maps

- visibility ٠ mode_comment

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

google-maps

در جلسه قبل در مورد گرفتن API Key برای نقشه گوگل صحبت کردیم و نقشه رو بر روی سایت آنلاین قرار دادیم.

Google maps امکاناتی رو برای شما به وجود میاره که میشه بواسطه اونا، نقشه با کارهایی که کاربران انجام میدن واکنش نشون بده. مثلا اگر بر نقطه ای کلیک بشه و یا رویداد دیگه ای بوقوع بپیونده، کار خاصی انجام میشه. مثلا با کلیک بر روی نقطه ای خاص، پیامی نمایش داده میشه و ...

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

اضافه کردن یک Event Listener

شما میتونین با استفاده از متد addListener() یک Event Listener به نقشه خودتون اضافه کنید. این متد سه ورودی رو قبول میکنه که اولین اونا همون المنتی هست که میخایم برای اون رویدادی رو مشخص کنید. بعد از اون نوع رویداد رو قرار میدیم. در آخر هم کدهایی که قصد داریم در زمان اتفاق رویداد اجرا بشن رو قرار میدیم. کد زیر رو در نظر بگیرید:

میبینید که یک متغیر بنام myCenter تعریف کردیم و مختصات نقطه خاصی رو برای اون قرار دادیم. حالا ار این مختصات هم برای map و هم برای marker استفاده میکنیم و موقعیت های اونا رو مشخص میکنیم. با استفاده از متد setMap هم این نشانه رو به نقشه متصل کردیم. حالا میخایم کاری کنیم که با کلیک بر روی نشانه مورد نظر، بزرگنمایی نقشه 7 برابر بشه. برای اینکار باید یک Event Listener اضافه کنیم. بصورت زیر:

میبینید که ورودی اول رو همون marker قرار دادیم و نوع رویداد هم برابر با click قرار دادیم. یعنی هر موقع بر روی marker مورد نظر کلیک بشه، تابع مورد نظر اجرا میشه. در ابتدا با استفاده از متد setZoom بزرگنمایی نقشه رو برابر با 7 قرار میدیم و با استفاده از setCenter هم موقعیت مرکز نقشه رو برابر با موقعیت marker قرار میدیم. خروجی بصورت زیر خواهد بود:event listener zoom google maps

حالا فرض کنید میخایم زمانی که بر روی نشانه مورد نظر کلیک شد، یک Info Window برای اون باز بشه و متنی رو نمایش بده. برای اینکار بصورت زیر عمل میکنیم:

میبینید که یک info window ساختیم و گفتیم که زمانی که بر روی marker مورد نظر کلیک شد، info window مورد نظر بر روی marker نمایش داده بشه. خروجی بصورت زیر هست:show info window google maps

همونطور که دیدید با کلیک بر روی marker یک پیام محتوی متن Hi نمایش داده میشه.

در نهایت برای پاک کردن یک رویداد از یک المنت از متد removeListener() و بصورت زیر عمل میکنیم:

میبینید که در ابتدا یک رویداد برای marker تعریف کردیم و در انتها از متد removeListener() استفاده کردیم. در خروجی خواهید دید که با کلیک بر روی نشانه هیچ اتفاقی نمیوفته.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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