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

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش 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

comment دیدگاه کاربران
saied-h

خدا خیرت بده! ممنونم از تو دوست عزیزم. هیچ مرجع فارسی زبانی در این مورد صحبت نکرده بود!
فقط یه سوال داشتم:
این که برای نسخه پایه 25000 بار نقشه رو به کاربر نشون میده، یعنی شامل نقشه های ثبت شده + نقشه هایی که فقط دیده می شوند؟
تصور کنید یک وبسایتی که کاربرای اون سایت، برای هر پست خودشون نقشه ثبت میکنند. مثل سایت های املاک.
این 25000 بار شامل کدوم میشه؟
ثبت شده ها + دیده شده ها ؟
یا فقط دیده شده ها ؟

خواهش میکنم دوست عزیز
هر بار که نقشه از سرور درخواست بشه و لود بشه، یکی از 25000 تا در اون روز کم میشه….حالا هر جوری که میخاد قرار داده شده باشه یا توسط هر کسی، فرقی نمیکنه
موفق باشید

saied-h

متوجه شدم. واقعاً کارت عالی و قشنگ بود!
ممنون از تو به خاطر گذاشتن این پست. اون هم به این سرعت!

قابلی نداشت ?

نیاز به لاگین

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