מאמר עזרה על עיצוב מפות מבוסס-ענן בפורמט 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

אובייקט נתוני מפתח/ערך שרירותיים שכלולים בהגדרת הסגנון. אפשר להשתמש בשדה הזה כדי לכלול תוכן שלא קשור לסגנון, אלא מתאר אותו. הנתונים האלה לא נשלחים ללקוחות של מפות, כמו 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

מספר ממשי (float) התאמה אישית של האטימות של הפוליגון או הקו הפוליגוני, כאשר 0 הוא שקוף ו-1 הוא אטום.

strokeColor

מחרוזת אפשר להתאים אישית את צבע המסגרת באמצעות מחרוזת הקסדצימלית של RGB.

strokeOpacity

מספר ממשי (float) התאמה אישית של האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.

strokeWeight

מספר ממשי (float) אפשר להתאים אישית את עובי המתאר בטווח של 0 עד 8.

מידע נוסף זמין במאמר בנושא מצולעים וקווי פוליגון.

label מעצבים

בטבלה הבאה מפורטים כל הסגנונות הזמינים של תוויות.

Styler סוג תיאור

visible

בוליאני כדי להסתיר את התווית של רכיב במפה, מגדירים את הערך false.

textFillColor

מחרוזת התאמה אישית של צבע תווית הטקסט באמצעות מחרוזת הקסדצימלית של RGB.

textFillOpacity

מספר ממשי (float) התאמה אישית של האטימות של תווית הטקסט, כאשר 0 הוא שקוף ו-1 הוא אטום.

textStrokeColor

מחרוזת אפשר להתאים אישית את צבע המסגרת באמצעות מחרוזת הקסדצימלית של RGB.

textStrokeOpacity

מספר ממשי (float) התאמה אישית של האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.

textStrokeWeight

מספר ממשי (float) אפשר להתאים אישית את עובי המתאר בטווח של 0 עד 8.

pinFillColor

מחרוזת אפשר להתאים אישית את צבע הסיכה באמצעות מחרוזת הקסדצימלית של RGB.

pinGlyphColor

מחרוזת התאמה אישית של צבע הגליף (הסמל) בתוך סיכה באמצעות מחרוזת הקסדצימלית של RGB.

pinOutlineColor

מחרוזת התאמה אישית של צבע קו המתאר של הסיכה באמצעות מחרוזת הקסדצימלית של RGB.

מידע נוסף זמין במאמר סמלים ותוויות טקסט.

רמות זום קובעות

אתם יכולים להגדיר סגנון אחד לתכונה לכל רמות הזום הקובעות, או לציין סגנונות שונים לרמות שונות של זום קובע. אם מספקים רק סגנון אחד, הוא ישמש לכל רמות ההתקרבות החל מ-z0. אם מספקים סגנונות לרמות שונות של זום, הסגנון יחול מרמת הזום הזו עד לרמה הבאה שהוגדרה.

כדי להגדיר רמת זום קובעת לסגנון, במאפיין לעיצוב, מגדירים את רמת הזום קובעת מ-z0 עד z22 ואז את ההתאמה האישית של מאפיין לעיצוב.

בדוגמה הבאה, צבע המים הוא שחור ברמות זום קובעות 0 עד 5, אפור כהה ברמות זום קובעות 6 עד 11 ואפור בהיר החל מרמת זום קובעת 12.

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

מידע נוסף מופיע במאמר בנושא רמות זום של סגנונות.

מגבלות

אפשר להשתמש ב-JSON כדי לעצב כמעט כל דבר במסוף Google Cloud, חוץ מהאפשרויות הבאות בתפריט הגדרות המפה:

כדי שהאפשרויות האלה ברמת המפה יוצגו בצורה נכונה, צריך לאחזר מחדש את נתוני המשבצות, וזה עלול להיות לא רצוי בתרחישי שימוש מסוימים.

כדי להשתמש באפשרויות האלה, צריך לבחור את ההעדפה בתפריט הגדרות המפה.

האפשרויות האלה לא נכללות בסגנונות שמיוצאים, ולכן צריך לבחור אותן מחדש במסוף Google Cloud כשמייבאים סגנון.