您已全部設定完成!

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

啟用 Google Static Maps API

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

  1. 建立或選擇專案
  2. 啟用 Google Static Maps API
  3. 建立適當的金鑰
繼續

樣式化地圖

使用 Google Static Maps API 時套用您自己的樣式,以自訂標準 Google 地圖的呈現方式。您可以變更道路、公園、建地區域與其他搜尋點等功能的視覺顯示。變更其色彩或樣式來強調特定內容、補充頁面上週圍的內容,或甚至完全隱藏功能。

範例

下列範例顯示美國布魯克林區 (Brooklyn, US) 的地圖,該地圖使用樣式將當地道路設定成亮綠色,並將住宅區域設定成黑色。它也反轉標籤的光度,讓標籤能夠在黑色背景中突顯出來。請注意,這個可運作範例使用網址編碼:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

下列範例使用樣式操作與簡化作業來概略顯示美國道路地圖集的外觀。

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

樣式語法

如果要建立自訂的樣式化地圖,請在要求網址中包含一或多個 style 參數。

每個 style 宣告都可能包含下列引數,使用縱線字元 (「|」) 來分隔:

  • feature (選擇性)指出要針對此樣式修改選取的特徵。特徵包含地圖上的物件,例如道路、公園或其他搜尋點。如果沒有 feature 引數,則指定的樣式會套用到所有特徵。
  • element (選擇性)指出要針對此樣式修改選取之指定特徵的元素。元素是某個特徵的特性,例如地理或標籤。如果沒有 element 引數,樣式會套用到指定特徵的所有元素。
  • 要套用到指定特徵與元素的一組「樣式規則」 (強制性)。API 會依照規則在 style 宣告中顯示的順序來套用它們。您可以在 Google Static Maps API 的一般網址長度限制內包含任意數目的規則。

注意:style 宣告必須依照表明的順序指定上述引數。下列範例提供以兩個規則選取特徵與元素的正確語法:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

特徵

下列 style 宣告會將地圖上所有道路加上色彩:

style=feature:road|color:0xffffff

以下是一些常用的特徵選取:

  • feature:all (預設)會選取地圖的所有特徵。
  • feature:road 會選取地圖上的所有道路。
  • feature:road.local 會選取所有當地的道路。

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

特徵會形成一個類別樹狀結構,根類別則是 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 會選取水域。

元素

下列 style 宣告會將所有當地道路的標籤加上色彩:

style=feature:road.local|element:labels|color:0xffffff

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

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

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

樣式規則

樣式規則為套用至在每個 style 宣告中指定之特徵與元素的格式選項。

下列 style 宣告會將兩個樣式規則套用到地圖上的道路。第一個規則將色彩套用到道路。第二個規則簡化道路的顯示,所以它們會變成沒有輪廓的較細線條。

style=feature:road|color:0xffffff|visibility:simplified

每一 style 宣告都必須包含一或多個操作,使用縱線 (「|」) 字元來分隔。每一操作使用冒號 (「:」) 字元來指定其引數值,而所有操作會依照指定選取的順序來套用它們。

支援下列樣式選項:

  • hue0xRRGGBB 格式的 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 能見度會從受影響的特徵移除一些樣式特徵;例如,道路會簡化成沒有輪廓的較細線條,而公園的標籤文字則會被移除但保留標籤圖示。
  • color0xRRGGBB 格式的 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 Static Maps API
需要協助嗎?請前往我們的支援網頁