云端地图样式设置的 JSON 参考

请选择平台： Android iOS 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”

monochrome

布尔值 如需启用单色，请使用 true 获取地图的灰度版本。

true

样式规则对象

本部分介绍了 styles 数组中用于自定义地图功能的样式规则对象的属性。每个样式规则对象都必须包含以下内容：

  • id 属性所定义）。
  • 定义了关联的样式器属性的 geometry 或 label 元素。

id（地图功能）

id 属性用于指定要设置样式的地图功能。属性名称是样式编辑器中地图要素名称的驼峰式大小写版本。

地图项构成类别树。如果您指定父级地图项类型（例如 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 十六进制字符串自定义图钉颜色。

如需了解详情，请参阅图标和文字标签。

Keyzoom

您可以为某个功能设置一种样式，以应用于所有关键缩放级别，也可以为不同的关键缩放级别指定不同的样式。如果您只提供一种样式，则该样式将用于从 z0 开始的所有 keyzoom 级别。如果您为不同的关键缩放级别提供样式，则该样式将从相应缩放级别开始应用，直至您定义的下一个缩放级别。

如需为样式设置 keyzoom 级别，请在样式设置器属性中定义从 z0 到 z22 的 keyzoom 级别，然后定义样式设置器自定义设置。

在以下示例中，水域颜色在关键缩放级别 0-5 时为黑色，在关键缩放级别 6-11 时为深灰色，从关键缩放级别 12 开始为浅灰色。

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

如需了解详情，请参阅样式缩放级别。

限制

您可以使用 JSON 在 Google Cloud 控制台中设置几乎所有内容的样式，但地图设置菜单中的以下功能除外：

对于这些功能，您必须在 地图设置菜单中选择偏好设置。