使用樣式選項可自訂標準 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 - 要套用到所選特徵與元素的規則。樣式工具指的是特徵的色彩、能見度和粗細。您可將一或多個樣式工具套用到特徵。
若要指定樣式,必須將一組 featureType 和 elementType 選取工具與您的 stylers 結合成一個樣式陣列。您可以在單一陣列中,將任何特徵組合當作目標。不過,一次可套用的樣式數量是有限的。如果您的樣式陣列超過字元數目上限,則不會套用任何樣式。
本頁面其餘部分,有關於特徵、元素和樣式工具的更多資訊。
featureType
下列 JSON 程式碼片段會選取地圖上的全部道路:
{
"featureType": "road"
}
特徵或特徵類型,是地圖的地理特性,包括道路、公園、水域、商家等等。
特徵會形成一個類別樹狀結構,根類別則是 all。如果您未指定特徵,則會選取全部特徵。指定 all 的特徵,效果相同。
有些特徵包含使用點標記法指定的子特徵。例如,landscape.natural 或 road.local。如果您只指定父項特徵,例如 road,則您針對父項所指定的樣式會套用到其全部子項,例如 road.local 和 road.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(介於-100到100之間的浮點數值) 指出元素亮度的百分比變更。負值會降低亮度(其中 -100 指定黑色),而正值會提高亮度(其中 +100 指定白色)。注意:本選項會設定光度,同時保留預設 Google 樣式(或您在地圖上定義的其他樣式選項)中指定的飽和度和色調。所產生的色彩是相對於基本地圖的樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以
lightness設定樣式的特徵。如果可行,最好是使用絕對color樣式。saturation(介於-100到100之間的浮點數值)指出套用到元素之基本色彩濃度的百分比變更。注意:本選項會設定飽和度,同時保留預設 Google 樣式(或您在地圖上定義的其他樣式選項)中指定的色調和光度。所產生的色彩是相對於基本地圖的樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以
saturation設定樣式的特徵。如果可行,最好是使用絕對color樣式。gamma(介於0.01到10.0之間的浮點數值,其中1.0表示不套用校正)指出套用到元素的色差補正校正數目。色差補正校正會以非線性方式修改色彩光度,同時不影響白色或黑色值。色差補正校正通常用來修改多個元素的對比。例如,您可以修改色差補正來提高或降低元素邊緣和內部兩者之間的對比。注意:此選項會使用色差補正曲線來調整相對於預設 Google 樣式的光度。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以
gamma設定樣式的特徵。如果可行,最好是使用絕對color樣式。invert_lightness(如果為true)會反轉現有的光度。例如,如果要快速切換到具有白色文字的深色地圖時,這個選擇很有用。注意:此選項會反轉預設 Google 樣式。如果 Google 對基本地圖樣式有任何變更,那些變更就會影響您地圖上以
invert_lightness設定樣式的特徵。如果可行,最好是使用絕對color樣式。visibility(on、off或simplified)指出地圖上是否顯示元素,以及其顯示方式。simplified能見度會從受影響的特徵移除一些樣式特徵;例如,道路會簡化成沒有輪廓的較細線條,而公園的標籤文字則會被移除但保留標籤圖示。color(#RRGGBB格式的 RGB 十六進位字串)可設定特徵的色彩。weight(大於或等於 0 的整數值)可設定特徵的粗細(像素)。將粗細設定在高值可能會裁剪到靠近地圖方塊邊界的地方。
樣式規則是以您所指定的順序套用。請勿將多個操作結合成一個樣式操作。反之,要將每一個操作定義成樣式陣列中的個別項目。
注意:順序很重要,因為某些操作不能相互交換。透過樣式操作修改的特徵和/或元素(通常)已經有現有樣式。那些操作會針對這些現有樣式(如果有的話)執行。
色調、飽和度、光度模型
樣式化地圖使用色調、飽和度、光度 (HSL) 模型,表示樣式工具操作內的色彩。「色調」 指出基本色彩,「飽和度」指出該色彩的濃度,「光度」指出構色中白色或黑色的相對數目。
色差補正修正可在色彩空間上修改光度,通常用來提高或降低對比。此外,HSL 模型能在座標空間內定義顏色,其中hue 指出色彩轉輪內的方向,而飽和度與光度則指出不同軸上的增幅。色調是在 RGB 色彩空間內進行測量,這個色彩空間與大多數的 RGB 色彩空間類似,唯一的差別在於缺少白色與黑色的色度。

雖然 hue 使用 HTML 十六進位色彩值,但是它只使用此值來決定基本色彩(亦即其在色彩轉輪上的方向),而不能決定飽和度或光度(會隨著百分比的變更而獨立指示)。
例如,您可以將純綠色的色調定義為 hue:0x00ff00 或 hue:0x000100。這兩個色調是完全一樣的。兩個值都能指向 HSL 色彩模型上的純綠色。

RGB 色彩轉輪
RGB hue 值是由相等的紅色、綠色和藍色所組成,這些值不表示色調,因為它們都未指出 HSL 座標空間中的方向。例如 "#000000" (黑色)、"#FFFFFF" (白色),以及所有純灰色階。如果要指示黑色、白色或灰色,您必須移除所有 saturation (將值設定成 -100)並改為調整 lightness。
此外,修改已經有色彩配置的現有特徵時,變更 hue 之類的值並不會變更色彩的現有 saturation 或 lightness。
