您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

樣式參考資料

使用樣式選項可自訂標準 Google 地圖樣式的呈現方式,並變更特徵(例如道路、公園、商家與其他搜尋點)的視覺顯示。除了可以變更這些特徵的樣式,您還可以完全隱藏特徵。這表示您可以強調地圖上的特定元件,或是讓地圖來補充周圍頁面的樣式。

範例

下列 JSON 樣式宣告會將所有地圖特徵轉變成灰色,然後將主幹道的幾何形狀塗成藍色,並完全隱藏景色標籤:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

JSON 物件

JSON 樣式宣告包含下列元素:

  • featureType (選擇性)- 要針對此樣式修改選取的特徵。特徵是地圖的地理特性,包括道路、公園、水域等等。如果您未指定特徵,則會選取全部特徵。
  • elementType (選擇性)- 要選取的指定特徵的屬性。元素是特徵的子部分,包括標籤和幾何形狀。如果不指定元素,則會選取該特徵的全部元素。
  • stylers - 要套用到所選特徵與元素的規則。樣式工具指的是特徵的色彩、能見度和粗細。您可將一或多個樣式工具套用到特徵。

若要指定樣式,必須將一組 featureTypeelementType 選取工具與您的 stylers 結合成一個樣式陣列。您可以在單一陣列中,將任何特徵組合當作目標。不過,一次可套用的樣式數量是有限的。如果您的樣式陣列超過字元數目上限,則不會套用任何樣式。

本頁面其餘部分,有關於特徵、元素和樣式工具的更多資訊。

featureType

下列 JSON 程式碼片段會選取地圖上的全部道路:

{
  "featureType": "road"
}

特徵或特徵類型,是地圖的地理特性,包括道路、公園、水域、商家等等。

特徵會形成一個類別樹狀結構,根類別則是 all。如果您未指定特徵,則會選取全部特徵。指定 all 的特徵,效果相同。

有些特徵包含使用點標記法指定的子特徵。例如,landscape.naturalroad.local。如果您只指定父項特徵,例如 road,則您針對父項所指定的樣式會套用到其全部子項,例如 road.localroad.highway

請注意,父項特徵可能包含某些元素,不一定是其全部子特徵都有包含的。

提供下列功能:

  • all (預設)會選取所有特徵。
  • administrative 會選取所有行政區域。樣式僅影響行政區域的標籤,不影響地理邊界或填滿。
    • administrative.country 會選取國家。
    • administrative.land_parcel 會選取土地區分。
    • administrative.locality 會選取地區。
    • administrative.neighborhood 會選取鄰近地區。
    • administrative.province 會選取省分。
  • landscape 會選取全部景色。
    • landscape.man_made 會選取人類建造的建築物。
    • landscape.natural 會選取自然特徵。
    • landscape.natural.landcover 會選取土地覆蓋特徵。
    • landscape.natural.terrain 會選取地形特徵。
  • poi 會選取所有搜尋點。
    • poi.attraction 會選取觀光景點。
    • poi.business 會選取商家。
    • poi.government 會選取政府大樓。
    • poi.medical 會選取緊急服務設施,包括醫院、藥房、警察、醫師等等。
    • poi.park 會選取公園。
    • poi.place_of_worship 會選取禮拜場所,包括教堂、廟宇、清真寺等等。
    • poi.school 會選取學校。
    • poi.sports_complex 會選取體育館。
  • road 會選取所有道路。
    • road.arterial 會選取主幹道。
    • road.highway 會選取高速公路。
    • road.highway.controlled_access 會選取有管制出入的高速公路。
    • road.local 會選取當地道路。
  • transit 會選取全部大眾運輸車站和路線。
    • transit.line 會選取大眾運輸路線。
    • transit.station 會選取所有大眾運輸車站。
    • transit.station.airport 會選取機場。
    • transit.station.bus 會選取公車站。
    • transit.station.rail 會選取鐵路車站。
  • water 會選取水域。

elementType

下列 JSON 程式碼片段會選取所有當地道路的標籤:

{
  "featureType": "road.local",
  "elementType": "labels"
}

將特徵細分後,得到的是元素。例如,道路是由地圖上的圖形線條(幾何形狀)組成,也包含指示其名稱的文字(標籤)。

以下是可用的元素,不過請注意,指定特徵可能不支援這些元素,或僅支援部分或全部元素:

  • all (預設)選取指定特徵的所有元素。
  • geometry 選取指定特徵的所有幾何元素。
    • geometry.fill 只會選取該特徵幾何形狀的填滿部分。
    • geometry.stroke 只會選取該特徵幾何形狀的筆觸部分。
  • labels 選取與指定特徵相關聯的文字標籤。
    • labels.icon 只會選取該特徵標籤內顯示的圖示。
    • labels.text 只會選取標籤的文字。
    • labels.text.fill 只會選取標籤的填滿部分。標籤的填滿部分通常轉譯為包圍標籤文字的著色輪廓。
    • labels.text.stroke 只會選取標籤文字的筆觸。

stylers

樣式工具是格式化選項,可用來套用到地圖特徵和元素。

下列 JSON 程式碼片段會使用一個 RGB 值,將某個特徵顯視為亮綠色:

"stylers": [
  { "color": "#99FF33" }
]

這個程式碼片段會移除某特徵色彩的所有濃度,不論其起始色為何。其效果,是將該特徵轉譯為灰階:

"stylers": [
  { "saturation": -100 }
]

這個程式碼片段會將某個特徵完全隱藏:

    "stylers": [
      { "visibility": "off" }
    ]

支援下列樣式選項:

  • hue#RRGGBB 格式的 RGB 十六進位字串)顯示基本色彩。

    注意:本選項會設定色調,同時保留預設 Google 樣式(或您在地圖上定義的其他樣式選項)中指定的飽和度和光度。所產生的色彩是相對於基本地圖的樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以 hue 設定樣式的特徵。如果可行,最好是使用絕對 color 樣式。

  • lightness (介於 -100100 之間的浮點數值) 指出元素亮度的百分比變更。負值會降低亮度(其中 -100 指定黑色),而正值會提高亮度(其中 +100 指定白色)。

    注意:本選項會設定光度,同時保留預設 Google 樣式(或您在地圖上定義的其他樣式選項)中指定的飽和度和色調。所產生的色彩是相對於基本地圖的樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以 lightness 設定樣式的特徵。如果可行,最好是使用絕對 color 樣式。

  • saturation (介於 -100100 之間的浮點數值)指出套用到元素之基本色彩濃度的百分比變更。

    注意:本選項會設定飽和度,同時保留預設 Google 樣式(或您在地圖上定義的其他樣式選項)中指定的色調和光度。所產生的色彩是相對於基本地圖的樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以 saturation 設定樣式的特徵。如果可行,最好是使用絕對 color 樣式。

  • gamma (介於 0.0110.0 之間的浮點數值,其中 1.0 表示不套用校正)指出套用到元素的色差補正校正數目。色差補正校正會以非線性方式修改色彩光度,同時不影響白色或黑色值。色差補正校正通常用來修改多個元素的對比。例如,您可以修改色差補正來提高或降低元素邊緣和內部兩者之間的對比。

    注意:此選項會使用色差補正曲線來調整相對於預設 Google 樣式的光度。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以 gamma 設定樣式的特徵。如果可行,最好是使用絕對 color 樣式。

  • invert_lightness (如果為 true)會反轉現有的光度。例如,如果要快速切換到具有白色文字的深色地圖時,這個選擇很有用。

    注意:此選項會反轉預設 Google 樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以 invert_lightness 設定樣式的特徵。如果可行,最好是使用絕對 color 樣式。

  • visibilityonoffsimplified)指出地圖上是否顯示元素,以及其顯示方式。simplified 能見度會從受影響的特徵移除一些樣式特徵;例如,道路會簡化成沒有輪廓的較細線條,而公園的標籤文字則會被移除但保留標籤圖示。
  • color#RRGGBB 格式的 RGB 十六進位字串)可設定特徵的色彩。
  • weight (大於或等於 0 的整數值)可設定特徵的粗細(像素)。將粗細設定在高值可能會裁剪到靠近地圖方塊邊界的地方。

樣式規則是以您所指定的順序套用。請勿將多個操作結合成一個樣式操作。反之,要將每一個操作定義成樣式陣列中的個別項目。

注意:順序很重要,因為某些操作不能相互交換。透過樣式操作修改的特徵和/或元素(通常)已經有現有樣式。那些操作會針對這些現有樣式(如果有的話)執行。

色調、飽和度、光度模型

樣式化地圖使用色調、飽和度、光度 (HSL) 模型,表示樣式工具操作內的色彩。「色調」 指出基本色彩,「飽和度」指出該色彩的濃度,「光度」指出構色中白色或黑色的相對數目。

色差補正修正可在色彩空間上修改光度,通常用來提高或降低對比。此外,HSL 模型能在座標空間內定義顏色,其中 hue 指出色彩轉輪內的方向,而飽和度與光度則指出不同軸上的增幅。色調是在 RGB 色彩空間內進行測量,這個色彩空間與大多數的 RGB 色彩空間類似,唯一的差別在於缺少白色與黑色的色度。

色調、飽和度、光度模型

雖然 hue 使用 HTML 十六進位色彩值,但是它只使用此值來決定基本色彩(亦即其在色彩轉輪上的方向),而不能決定飽和度或光度(會隨著百分比的變更而獨立指示)。

例如,您可以將純綠色的色調定義為 hue:0x00ff00hue:0x000100。這兩個色調是完全一樣的。兩個值都能指向 HSL 色彩模型上的純綠色。

RGB 色彩轉輪

RGB hue 值是由相等的紅色、綠色和藍色所組成,這些值不表示色調,因為它們都未指出 HSL 座標空間中的方向。例如 "#000000" (黑色)、"#FFFFFF" (白色),以及所有純灰色階。如果要指示黑色、白色或灰色,您必須移除所有 saturation (將值設定成 -100)並改為調整 lightness

此外,修改已經有色彩配置的現有特徵時,變更 hue 之類的值並不會變更色彩的現有 saturationlightness

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁