สคีมา 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)
 
การตั้งค่าระดับบนสุด
พร็อพเพอร์ตี้ในตารางต่อไปนี้ใช้กับรูปแบบแผนที่ทั้งหมด
| พร็อพเพอร์ตี้ | ประเภท | คำอธิบาย | ตัวอย่าง | 
|---|---|---|---|
| 
 | สตริง | ปรับแต่งสีพื้นหลังของแอปแผนที่โดยใช้สตริงเลขฐานสิบหก #RRGGBB การตั้งค่านี้ไม่รองรับการเปลี่ยนแปลงความทึบแสง | "#002211" | 
| 
 | "light"|"dark" | ระบุโหมดสว่างหรือโหมดมืด หากไม่ได้ระบุ ค่าเริ่มต้นจะเป็น "สว่าง" | "light" | 
| 
 | บูลีน | หากต้องการเปิดใช้ขาวดำ ให้ใช้ trueสำหรับแผนที่เวอร์ชันสีเทา | 
 | 
ออบเจ็กต์กฎรูปแบบ
ส่วนนี้อธิบายพร็อพเพอร์ตี้ที่กำหนดออบเจ็กต์กฎสไตล์ในอาร์เรย์ styles เพื่อปรับแต่งฟีเจอร์แผนที่ ออบเจ็กต์กฎสไตล์แต่ละรายการต้องประกอบด้วยข้อมูลต่อไปนี้
- idพร็อพเพอร์ตี้
- geometryหรือองค์ประกอบ- labelที่กำหนดพร็อพเพอร์ตี้การจัดรูปแบบที่เชื่อมโยง
id (ฟีเจอร์แผนที่)
พร็อพเพอร์ตี้ id ระบุฟีเจอร์แผนที่ที่จะจัดรูปแบบ ชื่อพร็อพเพอร์ตี้คือ
ชื่อฟีเจอร์แผนที่ในเครื่องมือแก้ไขรูปแบบที่เขียนในรูปแบบ Camel Case
ฟีเจอร์แผนที่จะสร้างโครงสร้างหมวดหมู่ หากคุณระบุประเภทฟีเจอร์หลัก เช่น 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: เลือกองค์ประกอบป้ายกำกับทั้งหมด (เช่น ข้อความ หมุด) ของฟีเจอร์แผนที่ที่ระบุ
ตู้ถนอมผ้า
Styler คือวิธีที่คุณกำหนดกฎสไตล์สำหรับองค์ประกอบแต่ละอย่างของฟีเจอร์แผนที่
ตัวอย่างเช่น สำหรับร่องรอยของอาคาร คุณสามารถจัดรูปแบบแต่ละองค์ประกอบได้ดังนี้
| ตัวอย่างสไตเลอร์ geometryสำหรับอาคาร | ตัวอย่างสไตเลอร์ labelสำหรับอาคาร | 
|---|---|
| จะซ่อนหรือแสดงรูปหลายเหลี่ยมร่องรอยของอาคารบนแผนที่ | จะซ่อนหรือแสดงป้ายกำกับอาคาร | 
| สีและความทึบแสงของสีเติมรูปหลายเหลี่ยม | สีและความทึบแสงของสีเติมข้อความ | 
| สี ความทึบแสง และความกว้างของเส้นขอบ | สีและความทึบแสงของเส้นข้อความ | 
ส่วนนี้จะอธิบายตัวเลือกสไตล์ต่างๆ ที่ใช้ได้สำหรับองค์ประกอบ 
geometry และ label
geometry สไตลิสต์
ตารางต่อไปนี้แสดงรายการตัวจัดรูปแบบเรขาคณิตทั้งหมดที่ใช้ได้
| Styler | ประเภท | คำอธิบาย | 
|---|---|---|
| 
 | บูลีน | หากต้องการซ่อนรูปหลายเหลี่ยมหรือเส้นหลายส่วนของฟีเจอร์แผนที่ ให้ตั้งค่าเป็น false | 
| 
 | สตริง | ปรับแต่งสีของรูปหลายเหลี่ยมหรือเส้นหลายเส้นด้วยสตริงเลขฐานสิบหก RGB | 
| 
 | จำนวนลอยตัว | ปรับแต่งความทึบแสงของรูปหลายเหลี่ยมหรือเส้นหลายเส้น โดยที่ 0 คือ โปร่งใสและ 1 คือทึบแสง | 
| 
 | สตริง | ปรับแต่งสีของเส้นขอบด้วยสตริงเลขฐานสิบหก RGB | 
| 
 | จำนวนลอยตัว | ปรับแต่งความทึบแสงของเส้นขอบ โดย 0 คือโปร่งใสและ 1 คือ ทึบแสง | 
| 
 | จำนวนลอยตัว | ปรับแต่งความหนาของเส้นขอบจากช่วง 0 ถึง 8 | 
ดูข้อมูลเพิ่มเติมได้ที่ รูปหลายเหลี่ยมและเส้นหลายส่วน
label สไตลิสต์
ตารางต่อไปนี้แสดงรายการตัวจัดรูปแบบป้ายกำกับทั้งหมดที่ใช้ได้
| Styler | ประเภท | คำอธิบาย | 
|---|---|---|
| 
 | บูลีน | หากต้องการซ่อนป้ายกำกับของฟีเจอร์แผนที่ ให้ตั้งค่าเป็น false | 
| 
 | สตริง | ปรับแต่งสีของป้ายกำกับข้อความด้วยสตริงเลขฐานสิบหก RGB | 
| 
 | จำนวนลอยตัว | ปรับแต่งความทึบแสงของป้ายกำกับข้อความ โดย 0 คือโปร่งใสและ 1 คือทึบแสง | 
| 
 | สตริง | ปรับแต่งสีของเส้นขอบด้วยสตริงเลขฐานสิบหก RGB | 
| 
 | จำนวนลอยตัว | ปรับแต่งความทึบแสงของเส้นขอบ โดย 0 คือโปร่งใสและ 1 คือ ทึบแสง | 
| 
 | จำนวนลอยตัว | ปรับแต่งความหนาของเส้นขอบจากช่วง 0 ถึง 8 | 
| 
 | สตริง | ปรับแต่งสีหมุดด้วยสตริงเลขฐานสิบหก RGB | 
ดูข้อมูลเพิ่มเติมได้ที่ ไอคอนและป้ายกำกับข้อความ
คีย์ซูม
คุณสามารถตั้งค่าสไตล์เดียวสำหรับฟีเจอร์ในทุกระดับการซูมคีย์ หรือระบุ สไตล์ที่แตกต่างกันสำหรับระดับการซูมคีย์ที่แตกต่างกัน หากระบุรูปแบบเพียงรูปแบบเดียว ระบบจะใช้รูปแบบนั้นกับระดับการซูมทั้งหมดโดยเริ่มจาก z0 หากคุณระบุรูปแบบสำหรับ ระดับการซูมคีย์ที่แตกต่างกัน รูปแบบจะมีผลตั้งแต่ระดับการซูมนั้นจนถึง ระดับถัดไปที่คุณกำหนด
หากต้องการตั้งค่าระดับคีย์ซูมสำหรับสไตล์ ให้กำหนดระดับคีย์ซูม จาก z0 ถึง z22 ในพร็อพเพอร์ตี้ Stylers แล้วกำหนดการปรับแต่ง Stylers
ในตัวอย่างต่อไปนี้ สีของน้ำจะเป็นสีดำตั้งแต่ระดับคีย์ซูม 0-5 สีเทาเข้มตั้งแต่ระดับคีย์ซูม 6-11 และสีเทาอ่อนตั้งแต่ระดับคีย์ซูม 12
{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}
ดูข้อมูลเพิ่มเติมได้ที่ระดับการซูมของสไตล์
ข้อจำกัด
คุณใช้ JSON เพื่อจัดรูปแบบแทบทุกอย่างใน Google Cloud Console ได้ ยกเว้นฟีเจอร์ต่อไปนี้จากเมนูการตั้งค่าแผนที่
สำหรับฟีเจอร์เหล่านี้ คุณต้องเลือกค่ากำหนดในเมนู การตั้งค่าแผนที่