مرجع سبک برای Maps JavaScript API

با گزینه‌های سبک، می‌توانید نحوه‌ی نمایش سبک‌های استاندارد نقشه گوگل را سفارشی کنید و نمایش بصری ویژگی‌هایی مانند جاده‌ها، پارک‌ها، مشاغل و سایر نقاط مورد علاقه را تغییر دهید. علاوه بر تغییر سبک این ویژگی‌ها، می‌توانید ویژگی‌ها را به طور کامل پنهان کنید. این بدان معناست که می‌توانید بر اجزای خاصی از نقشه تأکید کنید یا نقشه را طوری تنظیم کنید که مکمل سبک صفحه اطراف باشد.

مثال‌ها

اعلان سبک JSON زیر تمام عوارض نقشه را به خاکستری تبدیل می‌کند، سپس هندسه جاده شریانی را به رنگ آبی در می‌آورد و برچسب‌های منظره را کاملاً پنهان می‌کند:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

شیء JSON

یک اعلان به سبک JSON از عناصر زیر تشکیل شده است:

• نوع ویژگی (اختیاری) - ویژگی‌هایی که برای این تغییر سبک انتخاب می‌شوند. ویژگی‌ها، ویژگی‌های جغرافیایی روی نقشه هستند، از جمله جاده‌ها، پارک‌ها، پهنه‌های آبی و موارد دیگر. اگر یک ویژگی را مشخص نکنید، همه ویژگی‌ها انتخاب می‌شوند.
• elementType (اختیاری) - ویژگی عارضه مشخص شده برای انتخاب. عناصر، زیربخش‌های یک عارضه هستند، شامل برچسب‌ها و هندسه. اگر عنصری را مشخص نکنید، تمام عناصر عارضه انتخاب می‌شوند.
• استایلرها - قوانینی که باید روی ویژگی‌ها و عناصر انتخاب شده اعمال شوند. استایلرها رنگ، میزان دیده شدن و وزن ویژگی را نشان می‌دهند. می‌توانید یک یا چند استایلر را روی یک ویژگی اعمال کنید.

برای مشخص کردن یک سبک، باید مجموعه‌ای از انتخابگرهای featureType و elementType و stylers خود را در یک آرایه style ترکیب کنید. می‌توانید هر ترکیبی از ویژگی‌ها را در یک آرایه واحد هدف قرار دهید. با این حال، تعداد سبک‌هایی که می‌توانید همزمان اعمال کنید محدود است. اگر آرایه style شما از حداکثر تعداد کاراکترها تجاوز کند، هیچ سبکی اعمال نمی‌شود.

بقیه این صفحه اطلاعات بیشتری در مورد ویژگی‌ها، عناصر و استایلرها دارد.

featureType

قطعه کد JSON زیر تمام جاده‌های روی نقشه را انتخاب می‌کند:

{
  "featureType": "road"
}

عوارض یا انواع عوارض، ویژگی‌های جغرافیایی روی نقشه هستند، از جمله جاده‌ها، پارک‌ها، پهنه‌های آبی، مشاغل و موارد دیگر.

ویژگی‌ها یک درخت دسته‌بندی را تشکیل می‌دهند که all به عنوان ریشه هستند. اگر یک ویژگی را مشخص نکنید، همه ویژگی‌ها انتخاب می‌شوند. مشخص کردن یک ویژگی از all ، تأثیر یکسانی دارد.

برخی از ویژگی‌ها شامل ویژگی‌های فرزندی هستند که شما با استفاده از نماد نقطه مشخص می‌کنید. برای مثال، landscape.natural یا road.local . اگر فقط ویژگی والد، مانند road ، را مشخص کنید، سبک‌هایی که برای والد مشخص می‌کنید برای همه فرزندان آن، مانند road.local و road.highway اعمال می‌شود.

توجه داشته باشید که ویژگی‌های والد ممکن است شامل عناصری باشند که در همه ویژگی‌های فرزندشان گنجانده نشده‌اند.

ویژگی‌های زیر موجود است:

• all (پیش‌فرض) همه ویژگی‌ها را انتخاب می‌کند.
• administrative همه ناحیه‌های مدیریتی را انتخاب می‌کند. استایل‌بندی فقط روی برچسب‌های ناحیه‌های مدیریتی تأثیر می‌گذارد، نه روی مرزهای جغرافیایی یا پر کردن آنها.
  • administrative.country کشورها را انتخاب می‌کند.
  • administrative.land_parcel قطعات زمین را انتخاب می‌کند.
  • administrative.locality محل‌ها را انتخاب می‌کند.
  • administrative.neighborhood محله‌ها را انتخاب می‌کند.
  • administrative.province استان‌ها را انتخاب می‌کند.
• landscape همه مناظر را انتخاب می‌کند.
  • landscape.man_made ویژگی‌های ساخته دست بشر، مانند ساختمان‌ها و سایر سازه‌ها را انتخاب می‌کند.
  • landscape.natural ویژگی‌های طبیعی مانند کوه‌ها، رودخانه‌ها، بیابان‌ها و یخچال‌های طبیعی را انتخاب می‌کند.
  • landscape.natural.landcover ویژگی‌های پوشش زمین، یعنی مواد فیزیکی که سطح زمین را می‌پوشاند، مانند جنگل‌ها، علفزارها، تالاب‌ها و زمین‌های بایر را انتخاب می‌کند.
  • landscape.natural.terrain ویژگی‌های عوارض زمینی سطح زمین، مانند ارتفاع، شیب و جهت‌گیری را انتخاب می‌کند.
• poi تمام نقاط مورد نظر را انتخاب می‌کند.
  • poi.attraction جاذبه‌های گردشگری را انتخاب می‌کند.
  • poi.business کسب و کارها را انتخاب می‌کند.
  • poi.government ساختمان‌های دولتی را انتخاب می‌کند.
  • poi.medical خدمات اورژانسی، از جمله بیمارستان‌ها، داروخانه‌ها، پلیس، پزشکان و سایرین را انتخاب می‌کند.
  • poi.park پارک‌ها را انتخاب می‌کند.
  • poi.place_of_worship مکان‌های عبادت، از جمله کلیساها، معابد، مساجد و موارد دیگر را انتخاب می‌کند.
  • poi.school مدارس را انتخاب می‌کند.
  • poi.sports_complex مجموعه‌های ورزشی را انتخاب می‌کند.
• road همه جاده‌ها را انتخاب می‌کند.
  • road.arterial جاده‌های شریانی را انتخاب می‌کند.
  • road.highway بزرگراه‌ها را انتخاب می‌کند.
  • road.highway.controlled_access ‎ بزرگراه‌هایی با دسترسی کنترل‌شده را انتخاب می‌کند.
  • road.local جاده‌های محلی را انتخاب می‌کند.
• transit همه ایستگاه‌ها و خطوط حمل و نقل عمومی را انتخاب می‌کند.
  • transit.line خطوط حمل و نقل عمومی را انتخاب می‌کند.
  • transit.station همه ایستگاه‌های حمل و نقل عمومی را انتخاب می‌کند.
  • transit.station.airport فرودگاه‌ها را انتخاب می‌کند.
  • transit.station.bus ایستگاه‌های اتوبوس را انتخاب می‌کند.
  • transit.station.rail ‎ ایستگاه‌های راه‌آهن را انتخاب می‌کند.
• water پهنه‌های آبی را انتخاب می‌کند.

elementType

قطعه کد JSON زیر برچسب‌های تمام جاده‌های محلی را انتخاب می‌کند:

{
  "featureType": "road.local",
  "elementType": "labels"
}

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

عناصر زیر موجود هستند، اما توجه داشته باشید که یک ویژگی خاص ممکن است از هیچ، برخی یا همه عناصر پشتیبانی نکند:

رنگ‌های fill و stroke متن برچسب بر اساس سطح بزرگنمایی تغییر می‌کنند. برای اینکه تجربه کاربری در سطوح بزرگنمایی یکسان باشد، همیشه هم fill و هم stroke تعریف کنید.

• all (پیش‌فرض) تمام عناصر ویژگی مشخص‌شده را انتخاب می‌کند.
• geometry تمام عناصر هندسی عارضه مشخص شده را انتخاب می‌کند.
  • geometry.fill فقط مقدار پرکننده‌ی هندسه‌ی عارضه را انتخاب می‌کند.
  • geometry.stroke فقط خط دور هندسه‌ی عارضه را انتخاب می‌کند.
• labels برچسب‌های متنی مرتبط با ویژگی مشخص‌شده را انتخاب می‌کند.
  • labels.icon فقط آیکونی را که درون برچسب ویژگی نمایش داده شده است، انتخاب می‌کند.
  • labels.text فقط متن برچسب را انتخاب می‌کند.
  • labels.text.fill فقط مقدار پر شدن برچسب را انتخاب می‌کند. مقدار پر شدن یک برچسب معمولاً به صورت یک خط رنگی که متن برچسب را احاطه کرده است، نمایش داده می‌شود.
  • labels.text.stroke فقط خط دور متن برچسب را انتخاب می‌کند.

stylers

استایلرها گزینه‌های قالب‌بندی هستند که می‌توانید برای ویژگی‌ها و عناصر نقشه اعمال کنید.

قطعه کد JSON زیر، یک ویژگی را با استفاده از مقدار RGB به رنگ سبز روشن نمایش می‌دهد:

"stylers": [
  { "color": "#99FF33" }
]

این قطعه کد، صرف نظر از رنگ اولیه یک ویژگی، تمام شدت رنگ آن را حذف می‌کند. نتیجه، خاکستری کردن ویژگی است:

"stylers": [
  { "saturation": -100 }
]

این قطعه کد یک ویژگی را به طور کامل پنهان می‌کند:

    "stylers": [
      { "visibility": "off" }
    ]

گزینه‌های سبک زیر پشتیبانی می‌شوند:

• hue (یک رشته هگز RGB با فرمت #RRGGBB ) رنگ پایه را نشان می‌دهد.

  توجه: این گزینه، رنگ را تنظیم می‌کند و در عین حال، اشباع و روشنایی مشخص شده در سبک پیش‌فرض گوگل (یا در سایر گزینه‌های سبکی که روی نقشه تعریف می‌کنید) را حفظ می‌کند. رنگ حاصل، نسبت به سبک نقشه پایه است. اگر گوگل تغییری در سبک نقشه پایه ایجاد کند، این تغییرات بر ویژگی‌های نقشه شما که با hue سبک‌دهی شده‌اند، تأثیر می‌گذارد. در صورت امکان، بهتر است از سبک‌دهنده color مطلق استفاده کنید.

• lightness (مقداری بین -100 و 100 ) درصد تغییر در روشنایی عنصر را نشان می‌دهد. مقادیر منفی، تیرگی را افزایش می‌دهند (که -100 نشان‌دهنده‌ی رنگ سیاه است) در حالی که مقادیر مثبت، روشنایی را افزایش می‌دهند (که +100 نشان‌دهنده‌ی رنگ سفید است).

  توجه: این گزینه، میزان روشنایی را تنظیم می‌کند و در عین حال، اشباع و رنگ مشخص شده در سبک پیش‌فرض گوگل (یا در سایر گزینه‌های سبکی که روی نقشه تعریف می‌کنید) را حفظ می‌کند. رنگ حاصل، نسبت به سبک نقشه پایه است. اگر گوگل تغییری در سبک نقشه پایه ایجاد کند، این تغییرات بر ویژگی‌های نقشه شما که با lightness سبک‌بندی شده‌اند، تأثیر می‌گذارد. در صورت امکان، بهتر است از سبک‌دهنده color مطلق استفاده کنید.

• saturation (یک مقدار ممیز شناور بین -100 و 100 ) نشان دهنده درصد تغییر در شدت رنگ پایه برای اعمال به عنصر است.

  توجه: این گزینه، اشباع رنگ (saturation) را تنظیم می‌کند و در عین حال، رنگ و روشنایی (lightness) مشخص شده در سبک پیش‌فرض گوگل (یا در سایر گزینه‌های سبکی که روی نقشه تعریف می‌کنید) را حفظ می‌کند. رنگ حاصل، نسبت به سبک نقشه پایه است. اگر گوگل تغییری در سبک نقشه پایه ایجاد کند، این تغییرات بر ویژگی‌های نقشه شما که با saturation سبک‌بندی شده‌اند، تأثیر می‌گذارد. در صورت امکان، بهتر است از سبک‌دهنده color مطلق (absolute color styler) استفاده کنید.

• gamma (یک مقدار ممیز شناور بین 0.01 و 10.0 ، که در آن 1.0 هیچ اصلاحی اعمال نمی‌کند) میزان اصلاح گاما را برای اعمال به عنصر نشان می‌دهد. اصلاحات گاما، روشنایی رنگ‌ها را به صورت غیرخطی تغییر می‌دهند، در حالی که بر مقادیر سفید یا سیاه تأثیری ندارند. اصلاح گاما معمولاً برای تغییر کنتراست چندین عنصر استفاده می‌شود. به عنوان مثال، می‌توانید گاما را برای افزایش یا کاهش کنتراست بین لبه‌ها و فضای داخلی عناصر تغییر دهید.

  توجه: این گزینه با استفاده از منحنی گاما، روشنایی را نسبت به سبک پیش‌فرض گوگل تنظیم می‌کند. اگر گوگل تغییری در سبک نقشه پایه ایجاد کند، این تغییرات بر ویژگی‌های نقشه شما که با gamma سبک‌بندی شده‌اند، تأثیر می‌گذارد. در صورت امکان، بهتر است از سبک‌دهنده color مطلق استفاده کنید.

• invert_lightness (در صورت true ) روشنایی موجود را معکوس می‌کند. این برای مثال، برای تغییر سریع به یک نقشه تیره‌تر با متن سفید مفید است.

  نکته: این گزینه به سادگی سبک پیش‌فرض گوگل را معکوس می‌کند. اگر گوگل هرگونه تغییری در سبک نقشه پایه ایجاد کند، این تغییرات بر ویژگی‌های نقشه شما که با invert_lightness سبک‌دهی شده‌اند، تأثیر می‌گذارد. در صورت امکان، بهتر است از سبک‌دهنده color مطلق استفاده کنید.

• visibility ( on ، off یا simplified ) نشان می‌دهد که آیا عنصر روی نقشه ظاهر می‌شود یا خیر و چگونه. قابلیت مشاهده simplified برخی از ویژگی‌های سبک را از ویژگی‌های تحت تأثیر حذف می‌کند؛ برای مثال، جاده‌ها به خطوط نازک‌تر و بدون خطوط بیرونی ساده می‌شوند، در حالی که پارک‌ها متن برچسب خود را از دست می‌دهند اما نماد برچسب را حفظ می‌کنند.
• color (یک رشته هگز RGB با فرمت #RRGGBB ) رنگ عارضه را تنظیم می‌کند.
• weight (یک مقدار صحیح، بزرگتر یا مساوی صفر) وزن ویژگی را بر حسب پیکسل تعیین می‌کند. تنظیم وزن روی یک مقدار بالا ممکن است منجر به برش در نزدیکی مرزهای کاشی شود.

قوانین استایل به ترتیبی که شما مشخص می‌کنید اعمال می‌شوند. چندین عملیات را در یک عملیات استایل ترکیب نکنید. در عوض، هر عملیات را به عنوان یک ورودی جداگانه در آرایه استایل تعریف کنید.

نکته: ترتیب مهم است، زیرا برخی از عملیات‌ها قابلیت جابجایی ندارند. ویژگی‌ها و/یا عناصری که از طریق عملیات سبک‌بندی اصلاح می‌شوند (معمولاً) از قبل سبک‌های موجود دارند. این عملیات‌ها بر اساس آن سبک‌های موجود، در صورت وجود، عمل می‌کنند.

مدل رنگ، اشباع، روشنایی

نقشه‌های استایل‌بندی‌شده از مدل رنگ، اشباع، روشنایی (HSL) برای نشان دادن رنگ در عملیات استایل‌دهی استفاده می‌کنند. رنگ ، رنگ پایه را نشان می‌دهد، اشباع، شدت آن رنگ را نشان می‌دهد و روشنایی، مقدار نسبی سفید یا سیاه را در رنگ تشکیل‌دهنده نشان می‌دهد.

تصحیح گاما، روشنایی را در فضای رنگی تغییر می‌دهد، که عموماً برای افزایش یا کاهش کنتراست است. علاوه بر این، مدل HSL رنگ را در یک فضای مختصات تعریف می‌کند که در آن hue جهت‌گیری را در یک چرخ رنگ نشان می‌دهد، در حالی که اشباع و روشنایی، دامنه‌ها را در امتداد محورهای مختلف نشان می‌دهند. رنگ‌ها در یک فضای رنگی RGB اندازه‌گیری می‌شوند که مشابه اکثر فضاهای رنگی RGB است، با این تفاوت که سایه‌های سفید و سیاه وجود ندارند.

در حالی که hue یک مقدار رنگ هگز HTML را دریافت می‌کند، از این مقدار فقط برای تعیین رنگ پایه استفاده می‌کند - یعنی جهت آن در چرخه رنگ، نه اشباع یا روشنایی آن، که به صورت جداگانه به صورت درصد تغییر نشان داده می‌شوند.

برای مثال، می‌توانید رنگ سبز خالص را به صورت hue:0x00ff00 یا hue:0x000100 تعریف کنید. هر دو رنگ یکسان هستند. هر دو مقدار در مدل رنگ HSL به سبز خالص اشاره دارند.

چرخ رنگ RGB

مقادیر hue RGB که از بخش‌های مساوی قرمز، سبز و آبی تشکیل شده‌اند، رنگ را نشان نمی‌دهند، زیرا هیچ یک از این مقادیر جهت‌گیری را در فضای مختصات HSL نشان نمی‌دهند. به عنوان مثال می‌توان به "#000000" (سیاه)، "#FFFFFF" (سفید) و تمام سایه‌های خالص خاکستری اشاره کرد. برای نشان دادن سیاه، سفید یا خاکستری، باید تمام saturation حذف کنید (مقدار را روی -100 تنظیم کنید) و به جای آن lightness تنظیم کنید.

علاوه بر این، هنگام تغییر ویژگی‌های موجود که از قبل طرح رنگی دارند، تغییر مقداری مانند hue saturation یا lightness موجود آن را تغییر نمی‌دهد.