• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 10) - اضافه کردن Marker یا نشانه - قسمت 1

0 270 ۲۱ تیر ۹۵

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

google-maps

در جلسه قبل در مورد پیدا کردن موقعیت مورد نظر و نشان دادن اون در نقشه بحث کردیم. در این جلسه قصد داریم در مورد علایم و نشانه هایی که میشه بر روی نقشه قرار داد، صحبت کنیم.

ما میتونیم اشکال مختلفی رو به طول و عرض جغرافیایی که مد نظرمون هست اختصاص بدیم و کاری کنیم که در اونجا نمایش داده بشن. به این موارد در کل Overlay گفته میشه. نقشه گوگل overlays های زیر رو پشتیبانی میکنه:

  • Markers : برای قرار دادن نشانه بر روی نقشه
  • Polylines : برای قرار دادن خطهای پشت سرهم
  • Polygons : برای قرار دادن چند ضلعی ها
  • Circle and rectangle : برای قرار دادن دایره و مستطیل
  • Info window : برای قرار دادن باکس توضیح و اطلاعات
  • Symbols : برای قرار دادن سیمبول یا نماد یا علامت بر روی نقشه

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

اضافه کردن یک Marker ساده

برای اضافه کردن یک نشانه به نقشه گوگل، تنها کاری که لازمه بکنید اینه که نقطه که قصد دارید نشانه در اونجا قرار بگیره رو مشخص کنید. برای مثال کد زیر رو در نظر بگیرید:

میبینید که یک متغیر بنام marker ساختیم و یک نمونه جدید از google.maps.Marker با استفاده از عملگر new ساختیم. درون این نمونه با استفاده از ویژگی position طول و عرض جغرافیایی رو مشخص کردیم و با استفاده از ویژگی map هم اون نقشه ای که قصد داریم این نشانه بر روی اون قرار بگیره رو قرار میدیم.

کل کد بصورت زیر میشه:

خروجی بصورت زیر خواهد شد:simple marker google maps

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

  • DROP : در همون ابتدای نمایش نقشه نشانه از بالا به سمت پایین میوفته و در سر جای خودش قرار میگیره
  • BOUNCE : نشانه بصورت دائمی در نقطه مورد نظر بالا و پایین میشه

برای هر کدوم از موارد بالا مثالی رو میزنیم. در ابتدا برای DROP این کارو انجام میدیم. باید در مقابل ویژگی animation مقدار google.maps.Animation.DROP رو قرار بدیم تا انیمیشن DROP برای نشانه خودمون اعمال بشه. کدش بصورت زیر خواهد بود:

خروجی بصورت زیر میشه:drop animation google maps

میبینید که با هر بار رفرش اتفاق بالا میوفته و نشانه در سر جای خودش قرار میگیره و ثابت میشه. حالا برای BOUNCE هم بصورت زیر عمل میکنیم:

خروجی بصورت زیر میشه:bounce animation google mapsمیبینید که در این نمونه بصورت دائمی نشانه در حالت حرکت هست و متوقف نمیشه.

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

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

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram