مرجع النمط لواجهة برمجة تطبيقات JavaScript للخرائط

اختَر النظام الأساسي: 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

يتألف إعلان نمط 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"
}

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

تتوفّر العناصر التالية، ولكن يُرجى العلم بأنّ ميزة معيّنة قد لا تتيح أيًا من تلك العناصر أو بعض منها أو جميعها:

  • تختار all (الخيار التلقائي) جميع عناصر الميزة المحددة.
  • تختار السمة geometry جميع العناصر الهندسية للعنصر المحدد.
    • تختار geometry.fill تعبئة الشكل الهندسي للعنصر فقط.
    • تختار geometry.stroke فقط سُمك الشكل الهندسي للعنصر.
  • تختار ميزة labels التصنيفات النصية المرتبطة بالميزة المحدّدة.
    • لا يختار labels.icon سوى الرمز المعروض ضمن تصنيف العنصر.
    • تختار labels.text نص التصنيف فقط.
    • تختار labels.text.fill تعبئة التصنيف فقط. ويتم عادةً عرض تعبئة التصنيف كمخطط ملوّن يحيط بنص التصنيف.
    • تختار labels.text.stroke فقط ضغط نص التصنيف.

stylers

الأنماط هي خيارات تنسيق يمكنك تطبيقها على ميزات وعناصر الخريطة.

يعرض مقتطف JSON التالي إحدى الميزات باللون الأخضر الفاتح باستخدام قيمة نموذج أحمر أخضر أزرق:

"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 (سلسلة سداسية عشرية بتنسيق RGB بتنسيق #RRGGBB) يحدّد لون الميزة.
  • weight (قيمة عدد صحيح أكبر من أو تساوي صفرًا) يحدّد وزن العنصر بالبكسل. في حال ضبط الوزن على قيمة عالية، قد يتم اقتصاصه بالقرب من حدود المربّعات.

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

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

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

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

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

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

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

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

عجلة الألوان بنموذج أحمر أخضر أزرق

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

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