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

اختيار النظام الأساسي: Android Android 3D iOS iOS 3D 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". "light"

monochrome

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

true

metadata

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

{"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

سلسلة يمكنك تخصيص لون المضلّع أو الخطوط المتعدّدة باستخدام سلسلة سداسية عشرية بنظام RGB.

fillOpacity

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

strokeColor

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

strokeOpacity

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

strokeWeight

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

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

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

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

Styler النوع الوصف

visible

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

textFillColor

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

textFillOpacity

عدد عائم يمكنك تخصيص معدّل شفافية التصنيف النصي، حيث تكون القيمة 0 شفافة والقيمة 1 معتمة.

textStrokeColor

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

textStrokeOpacity

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

textStrokeWeight

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

pinFillColor

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

pinGlyphColor

سلسلة يمكنك تخصيص لون الرمز داخل الدبوس باستخدام سلسلة سداسية عشرية بنظام RGB.

pinOutlineColor

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

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

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

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

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على مستويات التكبير/التصغير في الأنماط.

القيود

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

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

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

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