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

- visibility ٠ mode_comment

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

google-maps

تغییر دادن تنظیمات مربوط به هر کنترلر

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

خروجی بصورت زیر هست:map type google maps

میبینید که منو بصورت افقی هست و گزینه های اون هم Terrain و Satellite هست. حالا میتونین با استفاده از روش زیر منو رو بصورت Drop Down در بیارید:

خروجی بصورت زیر هست:drop down map type

میبینید که با استفاده از ویژگی mapTypeControlOptions و قرار دادن google.maps.MapTypeControlStyle.DROPDOWN_MENU برای ویژگی Style، منوها رو بصورت Drop Down در آوردیم. ویژگی هایی که میشه برای نوع منو قرار داد بصورت زیر هست:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR : منو بصورت افقی در میاد
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU : منو بصورت Drop Down در میاد
  • google.maps.MapTypeControlStyle.DEFAULT : منو بصورت پیش فرض نمایش داده میشه

همچنین میتونیم با استفاده از ویژگی mapTypeIds گزینه هایی که در این منو نمایش داده میشه رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:

خروجی بصورت زیر میشه:map type ids google maps

دیدید که تونستیم گزینه هایی که در منوی گوگل مپ نمایش داده میشه رو عوض کنیم.

همچنین به راحتی میتونین مکان قرار گیری کنترلها رو در Google Maps رو به راحتی عوض کنید. مکانهایی که میتونین کنترلها رو در اونجا قرار بدین، بصورت زیر هست:

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

از روی اسم هر کدوم از موارد بالا میشه به راحتی معنی اون رو فهمید. برای مثال TOP_CENTER به معنای اینه که کنترلر رو در بالا و وسط نقشه نمایش میده.

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

خروجی بصورت زیر میشه:change position control google maps

میبینید که یکی از موقعیتهایی که بیان کردیم رو بعنوان مقدار ویژگی position قرار دادیم. برای مثال برای کنترلر بزرگنمایی مقدار google.maps.ControlPosition.BOTTOM_CENTER رو قرار دادیم که باعث میشه اون کنترلر در مکان پایین و وسط نقشه قرار بگیره.

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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