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

- visibility ٠ mode_comment

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

google-maps

علاوه بر Marker و Polyline و Polygon و دیگر اشکال هندسی، ما همچنین میتونیم تصاویر برداری و SVG از قبل تعریف شده رو به نقشمون اضافه کنیم. این جلسه به شما آموزش میده که چطور از Symbol ها در گوگل مپ استفاده کنید.

اضافه کردن یک Symbol

گوگل تصاویر برداری از پیش تعریف شده ای قرار داده که میتونین از اونها بر روی نقشه به عنوان نشانه یا Marker و ... استفاده کنید. همانند قبل که برای قرار دادن هر المنت بر روی تقشه، باید از یک شئ، نمونه گیری می کردیم، برای Symbol نیز به همین صورت هست. در زیر لیستی از شکلهای تعریف شده توسط گوگل رو خدمتتون عرض میکنیم و در ادامه برای هر کدام مثالی رو میاریم:

  • Circle : شکل دایره ساده رو به عنوان Symbol قرار میده
  • BACKWARD_CLOSED_ARROW : فلش رو به پایین و بسته یا close رو در نقطه مورد نظر قرار میده
  • FORWARD_CLOSED_ARROW : فلش رو به بالا و بسته یا close رو در نقطه مورد نظر قرار میده
  • BACKWARD_OPEN_ARROW : فلش رو به پایین و باز یا open رو در نقطه مورد نظر قرار میده
  • FORWARD_OPEN_ARROW : فلش رو به بالا و باز یا open رو در نقطه مورد نظر قرار میده

این شکلک ها دارای ویژگی های مشترک زیر هستند که متیونین متناسب با نیاز از اونا استفاده کنید:

  • path : با استفاده از این ویژگی میتونین نام اون شکلکی که در بالا بیان شد رو وارد کنید و یا یک مسیر SVG رو قرار بدید تا در خروجی نمایش داده بشه
  • fillColor : با استفاده از این ویژگی میتونید رنگ درونی یا پس زمینه شکلک رو عوض کنید
  • fillOpacity : تغییر شفافیت شکلک
  • scale : با استفاده از این ویژگی میتونین شکلک مورد نظر رو بزرگ و کوچک کنید. مثلا 0.5 اون رو نصف و 2 اون رو دو برابر میکنه
  • strokeColor : مشخص کردن رنگ border
  • strokeOpacity : مشخص کردن شفافیت border
  • strokeWeight : مشخص کردن ضخامت border

حالا در اینجا میخایم برای هر کدام از موارد بالا یک مثال بزنیم.

مثال Circle:

میبینید که یک marker بصورت زیر تعریف کردیم:

میبینید که درون ویژگی position موقعیت نشانه رو مشخص کردیم. برای اینکار از متد getCenter برای map استفاده کردیم. این کد باعث میشه که ویژگی center تعریف شده درون map رو بعنوان position قرار بده. قطعه کد اصلی در مقابل ویژگی icon قرار داده شده که همون symbol رو مشخص میکنه. همونطور که دیدید در مقابل ویژگی path ابتدا google.maps.SymbolPath قرار میگیره و بعد از اون یکی از 5 مورد بیان شده در بالا میاد. با استفاده از scale هم اون شکلک رو 10 برابر بزرگتر کردیم که واضح باشه.

خروجی بصورت زیر میشه:circle symbol google maps

مثال BACKWARD_CLOSED_ARROW:

خروجی:backward symbol google maps

مثال FORWARD_CLOSED_ARROW:

خروجی:foreward symbol google maps

مثال BACKWARD_OPEN_ARROW:

خروجی:backward open symbol google maps

مثال FORWARD_OPEN_ARROW:

خروجی:forward open symbol google maps

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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