مرجع JSON لتصميم الخرائط باستخدام السحابة الإلكترونية

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

يتيح لك مخطّط JSON الخاص بتصميم الخرائط باستخدام السحابة الإلكترونية استخدام JSON لتخصيص الخرائط بالطريقة نفسها التي تستخدمها من خلال واجهة "أداة تعديل النمط". يوضّح هذا المستند مخطّط JSON وكيفية إنشاء تعريفات بتنسيق JSON.

تنزيل مخطّط JSON

للتعرّف على كيفية تعديل نمط خريطة باستخدام JSON ضمن أداة تعديل النمط، أو لاستيراد نمط خريطة وتصديره، راجِع مقالة استخدام JSON مع تصميم الخرائط باستخدام السحابة الإلكترونية.

الاطّلاع على مثال على تعريف نمط JSON

يضبط بيان نمط JSON التالي لون الخلفية، ثم يحدّد أنماطًا لنقاط الاهتمام والحدائق والميزات المائية ويخفي التصنيفات الخاصة بمواقع بيع الطعام والشراب.


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

كائن JSON

يتألف تعريف نمط JSON من عنصر من المستوى الأعلى ومصفوفة من قواعد الأنماط.

  • السمات على المستوى الأعلى (اختيارية): إعدادات الأنماط العامة، مثل backgroundColor وvariant.
  • styles: مصفوفة من عناصر قواعد الأنماط، ويمكن أن تتألف من ما يلي:
    • id: عنصر على الخريطة سيتم اختياره لتعديل هذا النمط (مثل pointOfInterest.recreation.park).
    • geometry (اختياري): العناصر الهندسية الخاصة بعنصر على الخريطة وقواعد الأنماط التي سيتم تطبيقها (مثل fillColor).
    • label (اختياري) - نص أو تصنيف علامة الدبوس الخاصة بـ عنصر على الخريطة وقواعد الأنماط التي سيتم تطبيقها (مثل textStrokeColor).

الخصائص ذات المستوى الأعلى

تنطبق السمات الواردة في الجدول التالي على نمط الخريطة بالكامل.

الموقع النوع الوصف مثال

backgroundColor

سلسلة تخصيص لون خلفية تطبيق الخريطة باستخدام سلسلة ست عشرية بالتنسيق ‎ #RRGGBB لا يتيح هذا الإعداد إجراء تغييرات على مستوى الشفافية. "#002211"

variant

"light"|"dark" حدِّد الوضع الفاتح أو الداكن. إذا لم يتم تحديدها، تكون القيمة التلقائية هي "فاتح". "light"

monochrome

قيمة منطقية لتفعيل وضع الألوان الأحادية، استخدِم true لعرض نسخة رمادية من الخريطة.

true

metadata

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

{"author": "me", "date": "2026-04-27"}

عناصر قواعد الأنماط

يوضّح هذا القسم السمات التي تحدّد عناصر قاعدة الأنماط في مصفوفة styles لتخصيص ميزات الخريطة. يجب أن يتكوّن كل عنصر من عناصر قواعد الأنماط مما يلي:

  • موقع id
  • العنصر geometry أو label مع تحديد خصائص أداة التنسيق المرتبطة

id (عنصر على الخريطة)

تحدّد السمة id عنصر على الخريطة الذي سيتم تنسيقه. أسماء المواقع هي إصدارات camelcase من أسماء عناصر الخريطة في محرّر الأنماط.

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

قائمة بخصائص id المتاحة

في ما يلي سمات id المتاحة:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

العناصر

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

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

  • geometry: يختار جميع العناصر الهندسية (مثل المضلّع أو الخط المتعدد) الخاصة بميزة الخريطة المحدّدة.
  • label: تحدّد جميع عناصر التصنيف (مثل النص والدبوس) الخاصة بعنصر على الخريطة المحدّد.

أجهزة كي الملابس بالبخار

تتيح لك أدوات التنسيق تحديد قواعد التنسيق لكل عنصر من عناصر ميزة الخريطة.

على سبيل المثال، يمكنك تطبيق الأنماط على كل عنصر من عناصر مخطط المبنى على النحو التالي:

أمثلة على أدوات تصميم geometry لمبنى أمثلة على أدوات تصميم label لمبنى
تحديد ما إذا كان سيتم إخفاء مضلّع المساحة الأرضية للمبنى أو عرضه على الخريطة تحديد ما إذا كان سيتم إخفاء تصنيف المبنى أو إظهاره
لون تعبئة المضلّع ودرجة التعتيم لون تعبئة النص ودرجة التعتيم
لون الحدود ودرجة التعتيم والعرض لون خط النص ودرجة تعتيمه

يوضّح هذا القسم خيارات الأنماط المختلفة المتاحة للعنصرَين geometry وlabel.

geometry أدوات التنسيق

يسرد الجدول التالي جميع أدوات التنسيق الهندسية المتاحة.

Styler النوع الوصف

visible

قيمة منطقية لإخفاء المضلّع أو شكل متعدّد الخطوط الخاص بعنصر على الخريطة، اضبط القيمة على false.

fillColor

سلسلة خصِّص لون المضلّع أو الخط المتعدد باستخدام سلسلة سداسية عشرية بنموذج أحمر أخضر أزرق.

fillOpacity

عدد عائم تخصيص مستوى التعتيم للمضلّع أو الخط المتعدد، حيث 0 تعني شفاف و1 تعني معتم

strokeColor

سلسلة يمكنك تخصيص لون المخطط التفصيلي باستخدام سلسلة سداسية عشرية بتنسيق أحمر أخضر أزرق.

strokeOpacity

عدد عائم تخصيص مستوى تعتيم المخطّط، حيث 0 يعني شفاف و1 يعني معتم

strokeWeight

عدد عائم يمكنك تخصيص سمك المخطط التفصيلي من نطاق يتراوح بين 0 و8.

لمزيد من المعلومات، يُرجى الاطّلاع على المضلّعات والخطوط المتعددة.

label أدوات التنسيق

يسرد الجدول التالي جميع أدوات تصميم التسميات المتاحة.

Styler النوع الوصف

visible

قيمة منطقية لإخفاء تصنيف عنصر على الخريطة، اضبط القيمة على false.

textFillColor

سلسلة تخصيص لون تصنيف النص باستخدام سلسلة سداسية عشرية بتنسيق RGB

textFillOpacity

عدد عائم يمكنك تخصيص مستوى شفافية تصنيف النص، حيث يشير 0 إلى الشفافية و1 إلى التعتيم.

textStrokeColor

سلسلة يمكنك تخصيص لون المخطط التفصيلي باستخدام سلسلة سداسية عشرية بتنسيق أحمر أخضر أزرق.

textStrokeOpacity

عدد عائم تخصيص مستوى تعتيم المخطّط، حيث 0 يعني شفاف و1 يعني معتم

textStrokeWeight

عدد عائم يمكنك تخصيص سمك المخطط التفصيلي من نطاق يتراوح بين 0 و8.

pinFillColor

سلسلة تخصيص لون الدبوس باستخدام سلسلة سداسية عشرية بتنسيق RGB

pinGlyphColor

سلسلة تخصيص لون الرمز داخل دبوس باستخدام سلسلة سداسية عشرية لألوان الأحمر والأخضر والأزرق

pinOutlineColor

سلسلة تخصيص لون الخط المحيطي للدبوس باستخدام سلسلة سداسية عشرية بتنسيق RGB

لمزيد من المعلومات، يُرجى الاطّلاع على الرموز والتصنيفات النصية.

مستويات التكبير الرئيسية

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

لضبط مستوى التكبير الرئيسي لنمط، في سمة أداة التنسيق، حدِّد مستوى التكبير الرئيسي من z0 إلى z22 ثم تخصيص أداة التنسيق.

في المثال التالي، يكون لون المياه أسودًا من مستويات keyzoom من 0 إلى 5، ورماديًا داكنًا من مستويات keyzoom من 6 إلى 11، ورماديًا فاتحًا بدءًا من مستوى keyzoom 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

لمزيد من المعلومات، اطّلِع على مستويات تكبير الأنماط.

القيود

يمكنك استخدام JSON لتصميم كل العناصر تقريبًا في Google Cloud Console، باستثناء الخيارات التالية من قائمة إعدادات الخريطة:

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

بالنسبة إلى هذه الخيارات، عليك تحديد الإعداد المفضّل في قائمة إعدادات الخريطة.

وبما أنّ هذه الخيارات غير مضمّنة في الأنماط التي يتم تصديرها، يجب إعادة تحديدها في Google Cloud Console عند استيراد نمط.