雲端式地圖樣式設定的 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」。 「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 等級的特徵設定單一樣式，也可以為不同 Keyzoom 等級指定不同樣式。如果只提供一種樣式，系統會從 z0 開始，將該樣式用於所有 keyzoom 等級。如果您為不同 keyzoom 等級提供樣式，系統會從該縮放等級套用樣式，直到您定義下一個等級為止。

如要為樣式設定 keyzoom 級別，請在樣式器屬性中定義 z0 到 z22 的 keyzoom 級別，然後自訂樣式器。

在下列範例中，水色在 keyzoom 等級 0 到 5 為黑色，在 keyzoom 等級 6 到 11 為深灰色，從 keyzoom 等級 12 開始為淺灰色。

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

詳情請參閱「設定縮放等級的樣式」一文。

限制

您可以使用 JSON 設定 Google Cloud 控制台中的幾乎所有項目樣式，但「地圖設定」選單中的下列功能除外：

如要使用這些功能，請在「地圖設定」選單中選取偏好設定。