مرجع الأنماط لواجهة برمجة التطبيقات 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 في مصفوفة نمط. يمكنك استهداف أي مجموعة من الميزات في مصفوفة واحدة. ومع ذلك، هناك حدّ أقصى لعدد الأنماط التي يمكنك تطبيقها في آن واحد. إذا تجاوزت مصفوفة الأنماط الحد الأقصى لعدد الأحرف، لن يتم تطبيق أي نمط.

The rest of this page has more information about features, elements and 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 (سلسلة سداسية عشرية بنظام RGB بتنسيق #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 الحاليين.