مرجع الأنماط لواجهة برمجة التطبيقات Maps JavaScript API

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

باستخدام خيارات الأنماط، يمكنك تخصيص عرض أنماط خرائط Google العادية، وتغيير العرض المرئي لميزات مثل الطرق والمتنزهات والأنشطة التجارية وغيرها من نقاط الاهتمام. بالإضافة إلى تغيير نمط هذه المعالم، يمكنك إخفاء المعالم بالكامل. وهذا يعني أنّه يمكنك التركيز على مكوّنات معيّنة في الخريطة أو جعل الخريطة تتوافق مع نمط الصفحة المحيطة.

أمثلة

يؤدي بيان نمط JSON التالي إلى تحويل جميع معالم الخريطة إلى اللون الرمادي، ثم تلوين هندسة الطرق الشريانية باللون الأزرق، وإخفاء تصنيفات المناظر الطبيعية تمامًا:

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

لتطبيق بيان نمط JSON على خريطة، مرِّر مصفوفة الأنماط إلى السمة MapOptions.styles عند إنشاء الخريطة أو استدعاء Map.setOptions(). للاطّلاع على مثال كامل يوضّح كيفية استخدام أنماط JSON في أحد التطبيقات، يُرجى الاطّلاع على اختيار الخريطة ذات التصميم الخاص.

كائن JSON

يتألف بيان نمط JSON من العناصر التالية:

  • featureType (اختيارية): الميزات التي يتم اختيارها لتعديل هذا النمط. الميزات هي الخصائص الجغرافية على الخريطة، بما في ذلك الطرق والمتنزهات والمسطحات المائية وغيرها. في حال عدم تحديد ميزة، يتم اختيار جميع الميزات.
  • ‫elementType (اختياري): سمة العنصر المحدّد الذي تريد اختياره. العناصر هي أجزاء فرعية من المعلم، بما في ذلك التصنيفات والهندسة. في حال عدم تحديد عنصر، يتم اختيار جميع عناصر الميزة.
  • ‫stylers: القواعد التي سيتم تطبيقها على الميزات والعناصر المحدّدة تشير أدوات التصميم إلى لون العنصر ومدى ظهوره ووزنه. يمكنك تطبيق أداة تصميم واحدة أو أكثر على عنصر معيّن.

لتحديد نمط، يجب دمج مجموعة من أدوات الاختيار featureType وelementType وstylers في مصفوفة نمط. يمكنك استهداف أي مجموعة من الميزات في مصفوفة واحدة. ومع ذلك، فإنّ عدد الأنماط التي يمكنك تطبيقها في آنٍ واحد محدود. إذا تجاوزت مصفوفة الأنماط الحد الأقصى لعدد الأحرف، لن يتم تطبيق أي نمط.

يحتوي باقي هذه الصفحة على مزيد من المعلومات حول الميزات والعناصر وأنماط التنسيق.

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 (سلسلة سداسية عشرية لنموذج أحمر أخضر أزرق بالتنسيق #RRGGBB) إلى اللون الأساسي.

    ملاحظة: يضبط هذا الخيار تدرّج اللون مع الحفاظ على درجة التشبّع والسطوع المحدّدة في نمط Google التلقائي (أو في خيارات الأنماط الأخرى التي تحدّدها على الخريطة). ويكون اللون الناتج نسبيًا لنمط الخريطة الأساسية. إذا أجرت Google أي تغييرات على نمط الخريطة الأساسية، ستؤثر هذه التغييرات في ميزات الخريطة التي تم تصميمها باستخدام hue. من الأفضل استخدام أداة التنسيق المطلقة color إن أمكن.

  • تشير السمة lightness (قيمة نقطة عائمة بين -100 و100) إلى النسبة المئوية للتغيير في سطوع العنصر. تزيد القيم السالبة من درجة اللون الداكن (حيث تحدد القيمة ‎-100 اللون الأسود)، بينما تزيد القيم الموجبة من درجة السطوع (حيث تحدد القيمة ‎+100 اللون الأبيض).

    ملاحظة: يضبط هذا الخيار درجة السطوع مع الحفاظ على درجة التشبّع وتدرّج اللون المحدّدَين في نمط Google التلقائي (أو في خيارات الأنماط الأخرى التي تحدّدها على الخريطة). ويكون اللون الناتج نسبيًا لنمط الخريطة الأساسية. إذا أجرت Google أي تغييرات على نمط الخريطة الأساسية، ستؤثر هذه التغييرات في ميزات الخريطة التي تم تصميمها باستخدام lightness. من الأفضل استخدام أداة التنسيق المطلقة color إن أمكن.

  • تشير السمة saturation (قيمة نقطة عائمة بين -100 و100) إلى النسبة المئوية للتغيير في كثافة اللون الأساسي الذي سيتم تطبيقه على العنصر.

    ملاحظة: يضبط هذا الخيار تشبّع الألوان مع الحفاظ على تدرّج اللون والسطوع المحدّدَين في نمط Google التلقائي (أو في خيارات الأنماط الأخرى التي تحدّدها على الخريطة). ويكون اللون الناتج نسبيًا لنمط الخريطة الأساسية. إذا أجرت Google أي تغييرات على نمط الخريطة الأساسية، ستؤثر هذه التغييرات في ميزات الخريطة التي تم تصميمها باستخدام saturation. من الأفضل استخدام أداة التنسيق المطلقة color إن أمكن.

  • gamma (قيمة نقطة عائمة بين 0.01 و10.0، حيث لا يتم تطبيق أي تصحيح في 1.0) تشير إلى مقدار تصحيح غاما الذي سيتم تطبيقه على العنصر. تعدّل تصحيحات غاما سطوع الألوان بطريقة غير خطية، بدون التأثير في قيم اللون الأبيض أو الأسود. يُستخدم تصحيح غاما عادةً لتعديل تباين عناصر متعددة. على سبيل المثال، يمكنك تعديل غاما لزيادة التباين أو تقليله بين حواف العناصر وأجزائها الداخلية.

    ملاحظة: يضبط هذا الخيار درجة السطوع بالنسبة إلى نمط Google التلقائي، باستخدام منحنى غاما. إذا أجرت Google أي تغييرات على نمط الخريطة الأساسية، ستؤثر التغييرات في ميزات الخريطة التي تم تصميمها باستخدام gamma. من الأفضل استخدام أداة التنسيق المطلقة color إن أمكن.

  • invert_lightness (إذا كانت true) تعكس الإضاءة الحالية. هذا مفيد، على سبيل المثال، للتبديل بسرعة إلى خريطة داكنة مع نص أبيض.

    ملاحظة: يعكس هذا الخيار ببساطة نمط Google التلقائي. إذا أجرت Google أي تغييرات على نمط الخريطة الأساسية، ستؤثر التغييرات في ميزات الخريطة التي تم تصميمها باستخدام invert_lightness. من الأفضل استخدام أداة التنسيق المطلقة color إن أمكن.

  • تشير السمة visibility (on أو off أو simplified) إلى ما إذا كان العنصر يظهر على الخريطة وكيفية ظهوره. تؤدي قيمة مستوى العرض simplified إلى إزالة بعض ميزات الأنماط من الميزات المتأثرة، على سبيل المثال، يتم تبسيط الطرق إلى خطوط أرفع بدون خطوط خارجية، بينما تفقد المتنزهات نص التصنيف ولكن تحتفظ برمز التصنيف.
  • color (سلسلة سداسية عشرية لنموذج أحمر أخضر أزرق بالتنسيق #RRGGBB) يحدّد لون العنصر.
  • weight (قيمة عدد صحيح أكبر من أو تساوي صفرًا) تحدّد وزن الميزة بالبكسل. قد يؤدي ضبط الوزن على قيمة عالية إلى اقتصاص بالقرب من حدود المربّعات.

يتم تطبيق قواعد الأنماط بالترتيب الذي تحدّده. لا تدمج عمليات متعددة في عملية نمط واحدة. بدلاً من ذلك، حدِّد كل عملية كإدخال منفصل في مصفوفة الأنماط.

ملاحظة: الترتيب مهم، لأنّ بعض العمليات ليست تبادلية. إنّ الميزات و/أو العناصر التي يتم تعديلها من خلال عمليات الأنماط (عادةً) تكون لها أنماط حالية. وتعمل العمليات على هذه الأنماط الحالية، إن وُجدت.

نموذج درجة اللون والتشبّع والإضاءة

تستخدم الخرائط ذات التصميم الخاص نموذج درجة اللون والتشبع والإضاءة (HSL) للإشارة إلى اللون ضمن عمليات أداة التصميم. يشير تدرج اللون إلى اللون الأساسي، ويشير التشبع إلى كثافة هذا اللون، ويشير السطوع إلى المقدار النسبي للون الأبيض أو الأسود في اللون المكوّن.

يعدّل تصحيح غاما مستوى الإضاءة في الفضاء اللوني، وذلك بشكل عام لزيادة التباين أو تقليله. بالإضافة إلى ذلك، يحدّد نموذج HSL اللون ضمن مساحة إحداثيات حيث يشير hue إلى الاتجاه ضمن عجلة الألوان، بينما يشير التشبع والإضاءة إلى السعات على طول محاور مختلفة. يتم قياس تدرّجات الألوان ضمن فضاء لوني يستند إلى النموذج اللوني أحمر أخضر أزرق (RGB)، وهو مشابه لمعظم الفضاءات اللونية التي تستند إلى النموذج اللوني أحمر أخضر أزرق (RGB)، باستثناء غياب تدرّجات اللون الأبيض والأسود.

نموذج درجة اللون والتشبّع والإضاءة

على الرغم من أنّ السمة hue تأخذ قيمة لون ست عشري بتنسيق HTML، فإنّها تستخدم هذه القيمة فقط لتحديد اللون الأساسي، أي اتجاهه حول عجلة الألوان، وليس تشبّعه أو سطوعه، واللذين تتم الإشارة إليهما بشكل منفصل كنسب مئوية للتغيير.

على سبيل المثال، يمكنك تحديد درجة اللون الأخضر الخالص على النحو التالي: hue:0x00ff00 أو hue:0x000100. كلا اللونين متطابقان. تشير كلتا القيمتين إلى اللون الأخضر النقي في نموذج ألوان HSL.

عجلة ألوان RGB

لا تشير قيم RGB hue التي تتألف من أجزاء متساوية من الأحمر والأخضر والأزرق إلى درجة لون، لأنّ أيًا من هذه القيم لا يشير إلى اتجاه في مساحة إحداثيات HSL. ومن الأمثلة على ذلك "‎#000000" (أسود) و"‎#FFFFFF" (أبيض) وجميع درجات اللون الرمادي الخالص. للإشارة إلى اللون الأسود أو الأبيض أو الرمادي، عليك إزالة كل saturation (ضبط القيمة على -100) و ضبط lightness بدلاً من ذلك.

بالإضافة إلى ذلك، عند تعديل الميزات الحالية التي تتضمّن نظام ألوان، لا يؤدي تغيير قيمة مثل hue إلى تغيير saturation أو lightness الحاليين.