การอ้างอิง JSON สำหรับการจัดรูปแบบแผนที่ในระบบคลาวด์

เลือกแพลตฟอร์ม: Android Android 3D iOS iOS 3D JavaScript เว็บเซอร์วิส

สคีมา 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 ที่มีการกำหนดพร็อพเพอร์ตี้ Styler ที่เกี่ยวข้อง

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: เลือกองค์ประกอบป้ายกำกับทั้งหมด (เช่น ข้อความ หมุด) ของฟีเจอร์แผนที่ที่ระบุ

ตู้ถนอมผ้า

Styler คือวิธีที่คุณกำหนดกฎสไตล์สำหรับองค์ประกอบแต่ละรายการของฟีเจอร์แผนที่

ตัวอย่างเช่น สำหรับรอยเท้าอาคาร คุณสามารถจัดสไตล์องค์ประกอบแต่ละรายการได้ดังนี้

ตัวอย่างสไตเลอร์ geometry สำหรับอาคาร ตัวอย่างสไตเลอร์ label สำหรับอาคาร
ซ่อนหรือแสดงรูปหลายเหลี่ยมของร่องรอยอาคารบนแผนที่ จะซ่อนหรือแสดงป้ายกำกับอาคาร
สีเติมและความทึบแสงของรูปหลายเหลี่ยม สีและความทึบแสงของสีเติมข้อความ
สี ความทึบแสง และความกว้างของเส้นขอบ สีและความทึบแสงของเส้นข้อความ

ส่วนนี้อธิบายตัวเลือกสไตล์ต่างๆ ที่ใช้ได้สำหรับองค์ประกอบ geometry และ label

geometry สไตเลอร์

ตารางต่อไปนี้แสดงเครื่องมือจัดรูปแบบเรขาคณิตทั้งหมดที่ใช้ได้

Styler ประเภท คำอธิบาย

visible

บูลีน หากต้องการซ่อนรูปหลายเหลี่ยมหรือเส้นประกอบขององค์ประกอบแผนที่ ให้ตั้งค่าเป็น false

fillColor

สตริง ปรับแต่งสีของรูปหลายเหลี่ยมหรือเส้นประกอบด้วยสตริงเลขฐานสิบหก RGB

fillOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของรูปหลายเหลี่ยมหรือเส้นประกอบ โดยที่ 0 คือโปร่งใสและ 1 คือทึบแสง

strokeColor

สตริง ปรับแต่งสีของเส้นขอบด้วยสตริง RGB Hex

strokeOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของเส้นขอบ โดยที่ 0 คือโปร่งใส และ 1 คือทึบแสง

strokeWeight

จำนวนลอยตัว ปรับแต่งความหนาของเส้นขอบได้ตั้งแต่ 0 ถึง 8

ดูข้อมูลเพิ่มเติมได้ที่รูปหลายเหลี่ยมและเส้นประกอบ

label สไตเลอร์

ตารางต่อไปนี้แสดงเครื่องมือจัดรูปแบบป้ายกำกับทั้งหมดที่ใช้ได้

Styler ประเภท คำอธิบาย

visible

บูลีน หากต้องการซ่อนป้ายกำกับขององค์ประกอบแผนที่ ให้ตั้งค่าเป็น false

textFillColor

สตริง ปรับแต่งสีของป้ายกำกับข้อความด้วยสตริง RGB Hex

textFillOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของป้ายกำกับข้อความ โดยที่ 0 คือโปร่งใส และ 1 คือทึบแสง

textStrokeColor

สตริง ปรับแต่งสีของเส้นขอบด้วยสตริง RGB Hex

textStrokeOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของเส้นขอบ โดยที่ 0 คือโปร่งใส และ 1 คือทึบแสง

textStrokeWeight

จำนวนลอยตัว ปรับแต่งความหนาของเส้นขอบได้ตั้งแต่ 0 ถึง 8

pinFillColor

สตริง ปรับแต่งสีหมุดด้วยสตริงเลขฐานสิบหก RGB

pinGlyphColor

สตริง ปรับแต่งสีของภาพสัญลักษณ์ (ไอคอน) ภายในหมุดด้วยสตริง RGB Hex

pinOutlineColor

สตริง ปรับแต่งสีของขอบหมุดด้วยสตริง RGB Hex

ดูข้อมูลเพิ่มเติมได้ที่ไอคอนและป้ายกำกับข้อความ

คีย์ซูม

คุณสามารถตั้งค่าสไตล์เดียวสำหรับฟีเจอร์หนึ่งๆ สำหรับระดับคีย์ซูมทั้งหมด หรือระบุสไตล์ที่แตกต่างกันสำหรับระดับคีย์ซูมที่ต่างกัน หากคุณระบุเพียงสไตล์เดียว ระบบจะใช้สไตล์นั้นกับระดับคีย์ซูมทั้งหมดโดยเริ่มจาก z0 หากคุณระบุสไตล์สำหรับระดับคีย์ซูมที่แตกต่างกัน สไตล์จะใช้ตั้งแต่ระดับการซูมนั้นจนถึงระดับถัดไปที่คุณกำหนดไว้

หากต้องการตั้งค่าระดับคีย์ซูมสำหรับรูปแบบ ให้กำหนดระดับคีย์ซูมตั้งแต่ z0 ถึง z22 ในพร็อพเพอร์ตี้ Styler แล้วปรับแต่ง Styler

ในตัวอย่างต่อไปนี้ สีของน้ำจะเป็นสีดำตั้งแต่ระดับคีย์ซูม 0-5, สีเทาเข้มตั้งแต่ระดับคีย์ซูม 6-11 และสีเทาอ่อนตั้งแต่ระดับคีย์ซูม 12

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

ดูข้อมูลเพิ่มเติมได้ที่ระดับการซูมสไตล์

ข้อจำกัด

คุณใช้ JSON เพื่อจัดสไตล์เกือบทุกอย่างในคอนโซล Google Cloud ได้ ยกเว้นตัวเลือกต่อไปนี้จากเมนูการตั้งค่าแผนที่

ตัวเลือกระดับแผนที่เหล่านี้ต้องมีการดึงข้อมูลไทล์อีกครั้งเพื่อให้แสดงผลได้อย่างถูกต้อง ซึ่งอาจไม่เป็นที่ต้องการสำหรับกรณีการใช้งานบางอย่าง

สำหรับตัวเลือกเหล่านี้ คุณต้องเลือกค่ากำหนดในเมนู การตั้งค่าแผนที่

เนื่องจากตัวเลือกเหล่านี้ไม่ได้รวมอยู่ในสไตล์ที่ส่งออก คุณจึงต้องเลือกตัวเลือกเหล่านี้อีกครั้งในคอนโซล Google Cloud เมื่อนำเข้าสไตล์