本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# Amazon Location Service Maps
<a name="maps"></a>

![\[Map icon leading to SDK package, then to multiple devices showing maps.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/maps-overview.png)


Amazon Location Service Maps 可讓您存取 190 個國家/地區的基本地圖資料，每天更新 500 萬次。靜態和動態映射功能提供靈活性，以滿足各種使用者需求，並提供沉浸式、情境相關的映射解決方案。

## Maps 產品
<a name="maps-offering"></a>

Amazon Location Service 提供動態和靜態地圖。

**動態映射**  
使用 AWS 映射樣式，包括標準、單色、混合和衛星。使用地圖樣式和 [MapLibre](https://maplibre.org/) 轉譯引擎，將互動式 AWS 地圖新增至您的應用程式。動態貼圖支援手勢，包括縮放、平移、輕鬆、飛行、俯仰、旋轉和承載。如需詳細資訊，請參閱[動態地圖](https://docs.aws.amazon.com/location/latest/developerguide/dynamic-maps.html)。

**靜態地圖**  
使用靜態地圖 URLs網站、報告或電子郵件中嵌入簡單的地圖影像，而不需要地圖轉譯引擎。靜態貼圖支援覆蓋，包括應用程式的標記 （接腳）、路由和多邊形區域。如需詳細資訊，請參閱[靜態地圖](https://docs.aws.amazon.com/location/latest/developerguide/static-maps.html)。

## 預先建置的地圖樣式
<a name="prebuilt-map-styles"></a>

AWS 地圖樣式遵循公認的產業慣例，並提供優雅、專業的視覺外觀。這些現成樣式可加速開發，而不需要自訂編排設計。輕鬆建置吸引人、使用者就緒的地圖。如需詳細資訊，請參閱 [AWS 地圖樣式](https://docs.aws.amazon.com/location/latest/developerguide/map-styles.html)。

## 功能
<a name="maps-features"></a>

AWS 地圖功能為地理、[地形](https://docs.aws.amazon.com/location/latest/developerguide/maps-topographic-map.html)和[導航](https://docs.aws.amazon.com/location/latest/developerguide/maps-navigation-map.html)提供增強型視覺化選項，例如傳輸、物流和即時流量資料。根據您的特定需求建立資訊豐富的內容感知地圖體驗。 AWS 地圖支援[國際化和當地語系化](https://docs.aws.amazon.com/location/latest/developerguide/maps-localization-internationalization.html)，包括政治觀點和語言。選擇符合您使用案例的興趣點 (POI) 和[顏色方案](https://docs.aws.amazon.com/location/latest/developerguide/maps-color-scheme.html)。如需詳細資訊，請參閱[地圖功能](https://docs.aws.amazon.com/location/latest/developerguide/maps-concepts.html)。

## 常用案例
<a name="maps-usecases"></a>

**在您的應用程式中內嵌映射**  
在您的應用程式中建置地圖，以建立以位置為基礎的體驗。視覺化商業據點、搜尋興趣點，並協助使用者尋找特定地址。啟用無縫位置共用和地理標記功能，以吸引您的客戶。使用全面的地圖資料、強大的地理編碼和靈活的轉譯來建立根據您的需求量身打造的自訂互動式地圖。無論您要建置目錄、共乘應用程式或社交平台，都整合動態、高品質的映射體驗，以推動使用者對應用程式的參與度和業務洞察。

**用於報告或列印的靜態地圖**  
將街道地圖、衛星影像和以位置為基礎的視覺效果影像無縫新增至您的網站、文件和應用程式。靜態地圖可讓您建立可自訂的地圖影像，以提供地理內容，而無需複雜的用戶端轉譯。在收據上顯示交付路由、在文件中包含位置詳細資訊，或將地圖整合到您的數位體驗中。

**分析和視覺化資料**  
將您的資料覆蓋在高品質地圖上，以探索轉型的空間模式和趨勢。讓您的團隊能夠使用地理資料建立可自訂的互動式地圖視覺化效果。使用地圖和您的資料來最佳化網站選擇、規劃基礎設施，或分析市場機會。

**增強房地產體驗**  
為潛在買方提供房地產清單的完整位置內容。顯示屬性的確切位置，以及周邊鄰里詳細資訊，例如司法管轄區邊界、當地企業、公園和學校。協助客戶尋找通往您開放房屋的指示。建立資訊性、以位置為中心的房地產體驗，以吸引和通知您的客戶。

**建立引人入勝的旅遊體驗**  
顯示顯示目的地的動態地圖，其中包含詳細的街道檢視和主要地理功能。強調觀光客和旅客的飯店、餐廳和其他興趣點。繪製戶外設施，例如遠足線索，以協助使用者規劃理想的行程。

**使用地圖支援災難回應工作**  
在危機期間，及時準確的位置資訊至關重要。使用映射功能來建置網站和應用程式，在火災、颶風和洪水等待定災難期間為社群提供基本內容。顯示動態地圖，顯示疏散路線、安全避難所、道路封閉和交通擁塞，以協助社群快速評估情況並做出明智的決策。

## 獨立地圖 APIs
<a name="maps-apis"></a>


|  API 名稱  |  簡短描述  |  Resources  | 
| --- | --- | --- | 
|  GetStyleDescriptor  |  擷取可用於映射的可用映射樣式，例如標準、單色、混合和衛星。  |  [AWS 映射樣式和功能](map-styles.md)  | 
|  GetTile  |  根據指定的樣式和縮放層級擷取個別地圖圖磚，允許以各種細節層級渲染地圖。  |  [圖磚](tiles.md)  | 
|  GetStaticMap  |  根據特定座標和參數產生靜態地圖影像，有助於在報告或電子郵件中嵌入地圖。  |  [靜態地圖](static-maps.md)  | 

## 顯示地圖
<a name="maps-display"></a>


|  主題  |  簡短描述  |  Resources  | 
| --- | --- | --- | 
|  動態樣式映射  |  Amazon Location Service 提供兩種選項，可讓您使用預先設計的地圖樣式來設計動態 AWS 地圖，並使用樣式描述項來自訂地圖樣式。  | [樣式動態貼圖](styling-dynamic-maps.md) [標準地圖樣式](standard-map-style.md) [單色地圖樣式](monochrome-map-style.md) [混合地圖樣式](hybrid-map-style.md) | 
|  轉譯動態貼圖  |  Amazon Location Service 建議使用轉譯引擎[MapLibre](https://github.com/maplibre/maplibre-gl-js)轉譯地圖。 MapLibre 是一種在 Web 或行動應用程式中顯示地圖的引擎。  |  [依語言映射轉譯 SDK](map-rendering-by-language.md)  | 
|  自訂靜態映射  |  如何自訂使用 Amazon Location Service 產生的靜態地圖。  |  [自訂靜態地圖](customizing-static-maps.md)  | 
|  疊加靜態貼圖  |  在您的靜態地圖上覆蓋以增強地圖的視覺化呈現。  |  [靜態地圖上的浮水印](overlaying-static-map.md)  | 

# 映射概念
<a name="maps-concepts"></a>

Amazon Location Service 提供全方位的映射功能，可讓您為您的應用程式建立自訂且視覺上一致的映射。您可以利用 AWS 地圖樣式和設計原則來自訂地圖的外觀和風格，以確保視覺一致性和品牌。

對於 `ap-southeast-1`和 中的客戶`ap-southeast-5`，支援的請求和回應欄位可能會有所不同。如需詳細資訊，請參閱 [Maps API 參考](https://docs.aws.amazon.com/location/latest/APIReference/API_Operations_Amazon_Location_Service_Maps_V2.html)。

本主題涵蓋基本映射概念，包括術語、當地語系化、國際化和映射功能。

## 功能
<a name="maps-concepts-features"></a>

Amazon Location Service 可讓您使用進階樣式功能自訂地圖。新增地形和輪廓密度等地形元素，以及流量和行程模式 （卡車或傳輸） 等路由相關功能。這些自訂選項可協助您針對特定使用案例量身打造地圖外觀，包括物流、運輸或戶外地形視覺化。


| 特徵名稱 | Description | 支援的值 | 支援的地圖樣式 | 
| --- | --- | --- | --- | 
| 顏色方案 | 設定映射的顏色方案 | Light 和 Dark | Standard, Monochrome, Hybrid, Satellite | 
| 地形 | 顯示地形丘陵 | Hillshade 和 Terrain3D | Standard、Monochrome、 Hybrid(Terrain3D), Satellite (Terrain3D) | 
| ContourDensity | 顯示地形海拔線 | Low, Medium, High | Standard, Monochrome, Hybrid | 
| 流量 | 顯示即時流量條件 | All, Congestion | Standard, Monochrome, Hybrid | 
| 建築物 | 顯示三維建置結構 | Buildings3D | Standard, Monochrome | 
| TravelModes | 最佳化行程模式的地圖樣式 | Transit 和 Truck | Standard, Monochrome, Hybrid | 
| Language | 設定本機語言 | BCP47 語言代碼 （例如 en-US、es-ES、fr-CH) | Standard, Monochrome, Hybrid | 
| PoliticalView | 特定國家/地區的量身打造地緣政治觀點 | 阿根廷、賽普勒斯、埃及、喬治亞、希臘、肯亞、摩洛哥、巴勒斯坦、塞爾維亞、俄羅斯、蘇丹、蘇利南、敘利亞、托基基葉、坦尚尼亞、烏拉圭 | Standard, Monochrome, Hybrid | 

如需標準、單色和混合樣式的詳細資訊，請參閱 [Amazon Location Service 地圖樣式](https://docs.aws.amazon.com/location/latest/developerguide/map-styles.html)。

**Topics**
+ [功能](#maps-concepts-features)
+ [Maps 術語](maps-terminology.md)
+ [顏色方案](maps-color-scheme.md)
+ [地形](maps-topographic-map.md)
+ [導航](maps-navigation-map.md)
+ [當地語系化和國際化](maps-localization-internationalization.md)
+ [3D 功能](maps-3d-map.md)

# Maps 術語
<a name="maps-terminology"></a>

了解這些關鍵術語可協助您有效地使用 Amazon Location Service 映射 APIs和資源。

**基礎貼圖**  
基礎貼圖提供地圖的地理內容，存放為向量圖磚層。這些圖磚層包含地理功能，例如街道名稱、建築物和土地使用，以供視覺化參考。

**向量**  
向量資料由點、線和多邊形組成，用於代表地圖上的道路、位置和區域。向量形狀也可以用作地圖上標記的圖示。

**點陣圖**  
點陣資料是由網格組成的影像資料，通常代表連續資料，例如地形、衛星影像或熱度貼圖。點陣影像也可以用作地圖上的圖示或紋理。

**映射轉譯**  
映射轉譯程式庫會在執行時間從 Amazon Location Service 提取資料，並根據選取的映射資源轉譯映射。映射資源會定義資料提供者和映射樣式。Amazon Location Service 需要 [MapLibre](https://maplibre.org/) 轉譯引擎。

**向量並排**  
向量圖磚使用向量形狀存放映射資料。它會調整以顯示解析度並選擇性地轉譯功能，同時保持較小的檔案大小以獲得最佳效能。支援的格式：[Mapbox Vector Tiles (MVT)](https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/)。

**映射樣式**  
地圖樣式會定義地圖資料的顏色和其他樣式資訊，以決定渲染時地圖的顯示方式。Amazon Location Service 根據 Mapbox GL 樣式規格提供映射樣式。

**Glyph 檔案**  
包含編碼 Unicode 字元的二進位檔案，由映射轉譯器用來顯示標籤。

**Sprite 檔案**  
可攜式網路圖形 (PNG) 影像檔案，其中包含小型點陣影像和 JSON 檔案中的對應位置描述。地圖渲染器用來在地圖上顯示圖示或紋理。

**Bounding Box (邊界框)**  
週框方塊由兩個對角點定義：西北 (NW) （左上） 和東南 (SE) （右下） 點。這些點會指定地圖的空間範圍。

# 顏色方案
<a name="maps-color-scheme"></a>

Amazon Location Service 可讓您設定映射的顏色方案。顏色結構參數會設定映射的調色盤，例如 `Light`或 `Dark`，以更符合您應用程式的設計和可存取性需求。

## 淺色和深色顏色方案
<a name="maps-color-scheme-light-dark"></a>

`Light` 模式是多樣化的，可適應任何內容，而`Dark`模式具有限制的調色盤，旨在清楚地顯示詳細資訊，並在較暗的環境中保持可讀性。

------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-standard.png)


------
#### [ Monochrome ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-monochrome.png)


------
#### [ Hybrid ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-hybrid.png)


------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-satellite.png)


------

# 地形
<a name="maps-topographic-map"></a>

地形和等高線等地形特徵會顯示高度變化和地理特徵。這有助於使用者更好地了解其映射區域的物理景觀和地形特性。

## 地形
<a name="maps-topographic-terrain"></a>

地形功能會顯示地球表面的海拔陰影，代表海拔變化和自然地貌。它有助於使用者解譯其映射區域內地貌的形狀和結構。

使用 API 請求中的 `terrain` 參數來顯示具有海拔陰影的區域地形。此功能強調了海拔和地理特徵的變化，協助使用者更清楚地將物理景觀視覺化。請參閱[如何建立地形貼圖](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-topographic-maps.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-topographic-terrain.gif)


## 3D 地形
<a name="maps-topographic-3d-terrain"></a>

3D 地形功能會將地球表面的海拔資料轉譯為三維表面，讓使用者能夠從多個角度和角度檢視地形。透過控制檢視角度，使用者可以更輕鬆地獲得深度感知，並跨映射區域評估地形複雜性、坡度和相對高度。

使用 API 請求中的 `terrain` 參數來啟用三維地形視覺化。此功能提供地形特徵的身歷其境觀點，因此對於了解山地或變化地形中的空間關係特別有用。

在 API 請求中結合 3D 地形與 `contour-density` 參數，以增強海拔精確度和視覺化內容。請參閱[建立 3D 映射](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-hybrid-3d-terrain.gif)


------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-3d-terrain.gif)


------

## 輪廓密度
<a name="maps-topographic-contour-density"></a>

輪廓密度功能可視覺化輪廓線，以表示地形陡峭度和高度變化。使用者可以輕鬆識別斜坡、海拔梯度和其他地形模式。

在 API 請求中使用 `contour-density` 參數來呈現地形高度等高線線條，代表地形陡峭度和形狀。這可在不同的密度層級提供詳細地表視覺化，以增強地形理解。請參閱[如何建立地形貼圖](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-topographic-maps.html)。

------
#### [ Low ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-contours-low.gif)


------
#### [ Medium ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-contours-medium.gif)


------
#### [ High ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-contours-high.gif)


------

# 導航
<a name="maps-navigation-map"></a>

`Traffic` 和 等導覽功能`Truck TravelModes`提供動態視覺化工具，可增強導覽和路由規劃。它們可協助使用者了解即時道路狀況，並根據其運輸需求選擇最有效率的旅遊選項。

## 流量
<a name="maps-navigation-traffic"></a>

流量層提供流量條件的即時視覺化，包括道路擁塞、建構區域和回報的事件。此功能可協助使用者做出明智的路由決策，並根據目前的道路條件最佳化行程效率。

使用 API 請求中的 `traffic` 參數來顯示即時流量資訊。這包括道路擁塞、建構區域和事件的資料，協助使用者做出明智且有效率的路由決策。[了解如何在地圖上顯示即時流量](https://docs.aws.amazon.com/location/latest/developerguide/how-to-set-real-time-traffic-map.html)。

------
#### [ All ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-traffic-all.gif)


------
#### [ Congestion ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-traffic-congestion.gif)


------

## 行程模式
<a name="maps-navigation-travel-modes"></a>

行程模式功能可視覺化和選擇不同的運輸方法。它支援各種模式的路由資訊，例如公有運輸、卡車運輸，或其他考慮道路限制和法規的特殊導航類型。這有助於使用者規劃針對其特定旅行模式最佳化的路由。

使用 API 請求中的 `travel-modes` 參數來顯示運輸特定路由資料。[了解如何在地圖上顯示傳輸詳細資訊](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html)[，以及如何建立物流地圖](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-travel-modes-transit.gif)


![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-travel-modes-truck.gif)


# 當地語系化和國際化
<a name="maps-localization-internationalization"></a>

Amazon Location Service 支援當地語系化功能，可讓您自訂特定語言和區域的地圖。這包括支援本機位置名稱，以及以不同語言轉譯地圖的能力。


| Style (樣式) | 政治觀點 | 語言 | 
| --- | --- | --- | 
| 標準 | 阿根廷、賽普勒斯、埃及、喬治亞、希臘、肯亞、摩洛哥、巴勒斯坦、塞爾維亞、俄羅斯、蘇丹、蘇利南、敘利亞、托基基葉、坦尚尼亞、烏拉圭 | 透過用戶端程式庫支援 | 
| 單色 | 阿根廷、賽普勒斯、埃及、喬治亞、希臘、肯亞、摩洛哥、巴勒斯坦、塞爾維亞、俄羅斯、蘇丹、蘇利南、敘利亞、托基基葉、坦尚尼亞、烏拉圭 | 透過用戶端程式庫支援 | 
| 混合 | 阿根廷、賽普勒斯、埃及、喬治亞、希臘、肯亞、摩洛哥、巴勒斯坦、塞爾維亞、俄羅斯、蘇丹、蘇利南、敘利亞、托基基葉、坦尚尼亞、烏拉圭 | 透過用戶端程式庫支援 | 
| 衛星 | 不支援 | 不支援 | 

## 語言
<a name="maps-languages"></a>

Amazon Location Service 提供地圖 APIs，可讓您自訂地圖標籤和文字元素的語言。此功能可協助您的應用程式以多種語言滿足全球受眾或區域的需求。透過以使用者偏好的語言顯示地圖，您可以增強整體使用者體驗，讓地圖更易於存取且與您多樣化的使用者群相關。

如需詳細資訊，請參閱[如何設定地圖的偏好語言](how-to-set-preferred-language-map.md)。

![\[Map of Taiwan showing major cities including Taipei, Taichung, and Kaohsiung along the western coast.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/standard-language-switcher.gif)


## 政治觀點
<a name="maps-political"></a>

根據預設，Amazon Location Service 提供國際觀點，以視覺方式代表具有虛線邊界的爭用領土。若要從國際觀點切換到特定國家/地區的地緣政治檢視，請在 API 查詢中使用*政治檢視*參數。這有助於企業遵守當地法律，因為某些國家要求遵守其地圖和地圖資料的特定地緣政治觀點。

除了預設的國際觀點之外，Amazon Location Service 還支援下列國家/地區的地緣政治觀點：阿根廷、賽普勒斯、埃及、喬治亞、希臘、肯亞、摩洛哥、巴勒斯坦、塞爾維亞、俄羅斯、蘇丹、蘇利南、敘利亞、特拉基葉、坦尚尼亞、烏拉圭。若要啟用地緣政治檢視，請將適當的值傳遞至*政治檢視*參數。

如需詳細資訊，請參閱[如何設定地圖的政治觀點](how-to-set-political-view-map.md)。

![\[Map of Cyprus showing the locations of Nicosia and Limassol, with surrounding waters.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/maps-political-view.png)


# 3D 功能
<a name="maps-3d-map"></a>

Amazon Location Service 的 3D 視覺化功能 - 地形和建築物 - 透過為地理資料增加深度和觀點，協助使用者做出更好的決策。3D 地形顯示對路由最佳化、緊急回應規劃和戶外重建至關重要的海拔變更，而 3D 建築物則提供城市導覽、房地產評估和指標識別的空間內容。這些功能透過簡單的 API 參數 （地形、建築物） 無縫整合，讓跨物流、公共安全、旅遊和房地產的應用程式能夠提供更直覺且引人入勝的使用者體驗，而無需複雜的實作。

## 3D 地形
<a name="maps-3d-terrain"></a>

3D 地形功能會將地球表面的海拔資料轉譯為三維表面，讓使用者能夠從多個角度和角度檢視地形。透過控制檢視角度，使用者可以更輕鬆地獲得深度感知，並跨映射區域評估地形複雜性、坡度和相對高度。

在 API 請求中使用 `terrain` 參數來啟用三維地形視覺化。此功能提供地形特徵的身歷其境觀點，因此對於了解山地或變化地形中的空間關係特別有用。

在 API 請求中結合 3D 地形與 `contour-density` 參數，以增強海拔精確度和視覺化內容。請參閱[建立 3D 映射](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-hybrid-3d-terrain.gif)


------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-3d-terrain.gif)


------

## 3D 建築物
<a name="maps-3d-buildings"></a>

3D 建物功能會將建置足跡轉譯為具有高度和體積的三維結構，讓使用者從多個角度和角度視覺化城市環境。透過控制檢視角度，使用者可以更輕鬆地了解城市和已開發區域內的建置密度、高度關係和空間內容。

使用 API 請求中的 `buildings` 參數來啟用三維建置視覺化。此功能提供城市景觀的身歷其境視角，特別適用於了解城市配置、識別地標和導覽複雜的城市環境。請參閱[建立 3D 地圖](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-3d-buildings.gif)


## 全域檢視
<a name="maps-3d-globe-view"></a>

Globe View 功能提供地球的球形表示法，允許使用者視覺化三維地球上的地理資料。此觀點提供自然且直覺的方式，讓您了解全球空間關係、洲面配置，以及地球表面的曲率。

使用 Globe View 以逼真的地球曲率和全域視角顯示地圖。請參閱[建立 3D 映射](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/zoom-globe-view.gif)


# AWS 映射樣式和功能
<a name="map-styles"></a>

## 地圖樣式概觀
<a name="map-style-overview"></a>

若要請求映射，您必須先選擇映射樣式。地圖樣式定義轉譯地圖的視覺效果，包括地圖圖磚、網格和精靈的樣式。地圖圖磚可以是向量 (MVT) 或點陣圖 （影像）。雖然樣式可能會隨著放大或縮小而變更，但通常會維持一致的佈景主題。您可以覆寫部分或整個樣式，再將其傳遞至映射轉譯程式庫。

## AWS 映射樣式
<a name="aws-map-styles"></a>

AWS 地圖樣式符合業界標準，提供複雜且專業的外觀。這些樣式可縮短time-to-market，並消除專用攝影師從頭開始建立地圖樣式的需求。這些預先設計的樣式可讓您快速有效地為最終使用者建立具視覺吸引力的地圖。

透過利用預先設計的 AWS 地圖樣式，您可以略過從頭開始設計和建構地圖樣式的耗時和資源密集型程序。這可加速您的開發程序，讓您專注於核心功能。




| 映射樣式名稱 | Description | 顏色方案 | 支援動態映射 | 支援靜態映射 | 
| --- | --- | --- | --- | --- | 
| 標準 | 彩色地圖樣式 | 深色和淺色 | 是 | 是 | 
| 單色 | 灰色比例映射樣式 | 深色和淺色 | 是 | 否 | 
| 混合 | 衛星影像上的道路和標籤浮水印 | 不適用 | 是 | 否 | 
| 衛星 | 衛星影像型地圖樣式 | 不適用 | 是 | 是 | 

Amazon Location Service 會根據樣式[MapLibre GL規格提供樣式](https://maplibre.org/maplibre-style-spec/)。

## 標準地圖樣式
<a name="standard-map"></a>

標準地圖樣式是一種簡潔且現代化的一般用途地圖設計，可完美且正常運作地適應幾乎任何應用程式或網站。

如需詳細資訊，請參閱 [標準地圖樣式](standard-map-style.md)。

![\[Map of Boston showing neighborhoods, streets, and waterways in standard and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-standard.png)


## 單色地圖樣式
<a name="monochrome-map"></a>

單色貼圖樣式是具有受限調色盤的極簡畫布，旨在與資料視覺化浮水印搭配使用。單色風格同時提供淺色和深色模式，傳達地理環境所需的所有重要資訊。

如需詳細資訊，請參閱 [單色地圖樣式](monochrome-map-style.md)。

![\[Two maps of North America, one light and one dark, showing countries and major bodies of water.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-monochrome.png)


## 混合地圖樣式
<a name="hybrid-map"></a>

混合貼圖風格結合了全域衛星影像與清晰標籤，以及來自向量貼圖的可設定 POI 類別。

如需詳細資訊，請參閱 [混合地圖樣式](hybrid-map-style.md)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-hybrid.png)


## 衛星地圖樣式
<a name="satellite-map"></a>

衛星地圖樣式呈現衛星擷取的高解析度真實世界影像，提供地景、建築物和地形的逼真的視野。此樣式通常包含最少的標籤或浮水印，以專注於地理詳細資訊。

![\[Satellite view of Australia, New Zealand, and Southeast Asian islands surrounded by deep blue oceans.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-satellite.png)


# 標準地圖樣式
<a name="standard-map-style"></a>

標準地圖樣式提供簡潔、現代和一般用途的地圖設計，可無縫適用於幾乎任何應用程式或網站。

## 顏色方案
<a name="color-scheme"></a>

標準地圖樣式同時提供淺色和深色模式。光線模式是多樣化的，可以適應任何內容，而深色模式具有受限的調色盤，旨在清楚地顯示詳細資訊，並在較暗的環境中保持可讀性。這可確保最小的干擾，尤其是在夜間導覽等情況下。

------
#### [ Forest ]

![\[Map of Washington state and Vancouver area showing coastal regions and major cities.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-forest.png)


------
#### [ Road ]

![\[Map of Bronx area showing highways, neighborhoods, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-road.png)


------
#### [ City ]

![\[Map of Boston showing neighborhoods, streets, and waterfront areas in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-city.png)


------
#### [ Neighborhood ]

![\[Map of Montreal showing districts, landmarks, and streets in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/color-scheme-neighborhood.png)


------

## 令人滿意的現代調色盤
<a name="modern-palette"></a>

柔和的顏色提供重要的土地使用內容，而不會壓倒地圖，在高和低縮放層級提供有用的資訊。縮小功能，例如森林、荒野和冰河，為地圖增加豐富度。放大時，一系列顏色強調了重要的地標，例如學校、醫院、娛樂區域 （例如公園和運動設施），以及商業和工業區域等城市區域。

整體風格具有凝聚色調，包括補充其各自土地使用區域的 POI 標記。道路網路以灰色陰影顯示，提供細節，而不會讓地圖充滿明亮、令人分心的顏色。

------
#### [ Highway ]

![\[Map of San Francisco Bay Area showing cities and highways in standard and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/modern-highway.png)


------
#### [ Beach ]

![\[Map of Malibu area showing Pacific Coast Highway, Legacy Park, and Malibu Lagoon State Beach.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/modern-beach.png)


------
#### [ Island ]

![\[Map of Oahu island showing major highways, Honolulu, and surrounding areas in day and night views.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/modern-island.png)


------
#### [ Neighborhood ]

![\[Map of downtown Honolulu showing streets, landmarks, and neighborhoods in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/modern-neighborhood.png)


------
#### [ Intersection ]

![\[Map of Lower Manhattan showing City Hall Park, streets, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/style-intersection.png)


------
#### [ Roundabout ]

![\[Map of Washington Circle area showing streets, landmarks, and points of interest in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/style-roundabout.png)


------

## 豐富的興趣點 (POI)
<a name="rich-poi"></a>

標準映射樣式支援一系列豐富的可設定興趣點 (POIs)。只要幾行程式碼，您就可以選取與使用案例相關的 POI 類別。

![\[Map showing various points of interest in Midtown Manhattan, including businesses and landmarks.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/poi-toggle-animation.gif)


## 專為世界設計
<a name="designed-for-the-world"></a>

標準樣式支援不同的政治視觀表，確保映射為您的使用者顯示正確的邊界。此樣式也允許輕鬆切換地圖標籤的語言，包括數十種支援的語言和寫入系統。

如需詳細資訊，請參閱 [當地語系化和國際化](maps-localization-internationalization.md)。

------
#### [ Languages ]

![\[Map of Taiwan showing major cities and geographical features including Taiwan Strait.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/standard-language-switcher.gif)


------
#### [ Political view ]

![\[Map of Cyprus showing Nicosia in the north and Limassol in the south, with surrounding Mediterranean Sea.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/maps-political-view.png)


------

## 地形
<a name="topography"></a>

標準地圖樣式提供詳細的地形視覺化，強調海拔變化和自然地理特徵。等高線線條、陰影和地形紋理可真實呈現地景，讓使用者輕鬆解譯斜坡、山谷和山峰。此地形渲染非常適合戶外規劃、環境分析，以及了解地形特性可增強決策和空間意識的應用程式。

------
#### [ Both Terrain and Contour Density ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-terrain-contour-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-terrain-contour-dark.png) 

------
#### [ Only terrain ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-terrain-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-terrain-dark.png) 

------
#### [ Only contour density ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-contour-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/map-contour-dark.png) 

------

## 導航
<a name="navigation"></a>

標準地圖樣式提供選項來提供動態視覺化，旨在最佳化導覽和路由規劃。即時流量資料反白顯示擁塞、事件和道路狀況，讓使用者能夠預測延遲並相應地調整其路由。使用卡車或公有運輸等多種旅行模式，此功能可讓使用者為其路由選擇最有效率且內容適當的選項，確保更順暢且更明智的路由體驗。

------
#### [ Traffic ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/traffic-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/traffic-dark.png) 

------
#### [ Transit ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/transit-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/transit-dark.png) 

------
#### [ Truck ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/truck-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/truck-dark.png) 

------

## 3D
<a name="3D"></a>

標準地圖樣式提供身歷其境的三維視覺化，以空間深度和視野呈現地形海拔和建築物結構。可調整的檢視角度、俯仰控制項和三維渲染可真實呈現自然景觀和城市環境，讓使用者輕鬆解譯海拔變化、地形複雜性和空間關係。這種立體渲染非常適合用於路線規劃、城市導航和應用程式，其中了解垂直維度和深度感知可增強決策和空間感知。

------
#### [ 3D Terrain ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/3d-terrain-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/3d-terrain-dark.png) 

------
#### [ 3D Buildings ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/3d-buildings-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/3d-buildings-dark.png) 

------

## 土地使用
<a name="land-use"></a>

標準地圖樣式使用生動的顏色來表示指定的土地用途。綠色代表森林、草地、球場、運動中心和公園。相關顏色用於水體、冰川、荒野和海灘。此外，商業、工業、機場、軍事區域、醫療設施和教育區域等土地使用會特別強調特定的生動類別。

------
#### [ Light ]

![\[Color-coded squares representing various land uses with corresponding hex codes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/land-use-light.png)


------
#### [ Dark ]

![\[Color-coded squares representing various land uses with corresponding hex codes and labels.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/land-use-dark.png)


------

# 單色地圖樣式
<a name="monochrome-map-style"></a>

單色樣式是一種極簡畫布，具有受限的調色盤，旨在與資料視覺化浮水印搭配使用。此樣式同時支援淺色和深色模式，每個模式都會傳達地理內容所需的所有重要資訊。

## 顏色方案
<a name="color-schemes"></a>

單色樣式提供深色和淺色模式的顏色選擇。

------
#### [ Continent ]

![\[Map of North America showing the United States, Canada, Mexico, and parts of Central and South America.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-continent.png)


------
#### [ Neighborhood ]

![\[Map of Downtown Miami showing streets, parks, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-neighborhood-colors.png)


------

## 使用案例
<a name="use-case"></a>

單色樣式非常適合資料視覺化和極簡設計需求。

### 資料視覺化
<a name="data-visualization"></a>

單色樣式刻意僅使用灰色陰影，可讓您完全自由選擇資料浮水印圖層的顏色，例如絶石、熱度圖或點貼圖。

![\[Map of lower Manhattan showing streets, landmarks, and red dots indicating data points.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-data-vis.png)


### 極簡設計
<a name="minimalist"></a>

為了維持簡潔且簡潔的地圖，單色風格包含基本功能的一組減少興趣點 (POIs)，例如機場、公園、醫院和大學。

------
#### [ Airport ]

![\[Map showing Miami International Airport and surrounding roads including Airport Expy and Dolphin Expy.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-airport.png)


------
#### [ Neighborhood ]

![\[Map showing Jackson Memorial Hospital, UHealth Tower, and nearby streets in light and dark modes.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-neighborhood.png)


------

雖然單色樣式包含減少的一組 POIs，但基礎圖磚仍包含完整的一組 POI 資料。這可讓您顯示樣式中不存在的 POIs。

## 專為世界設計
<a name="designed-for-the-world"></a>

Monochrome 樣式支援不同的政治觀點，確保地圖為您的使用者顯示正確的邊界。樣式也允許在地圖標籤的語言之間輕鬆切換，包括數十種支援的語言和寫入系統。

![\[Map of Taiwan showing major cities and the Taiwan Strait, with a monochrome color scheme.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/monochrome-language-switcher.gif)


# 混合地圖樣式
<a name="hybrid-map-style"></a>

混合地圖樣式結合了全域衛星影像與標準地圖樣式中相同的清晰標籤和可設定的興趣點 (POI) 類別。此組合提供豐富的地理詳細資訊，同時確保應用程式的可讀性和可用性。

## 豐富的興趣點 (POI)
<a name="rich-poi"></a>

這些標籤和 POIs專為對比和可讀性而設計，提供衛星層的必要內容，而不會干擾詳細的影像。當您放大時，淺色道路線會突出城市結構，並在放大時逐漸淡入，顯示更詳細的街道層級資訊。

------
#### [ Zoom ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/hybrid_zoom.gif)


------
#### [ Neighborhood ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/hybrid-neighborhood.png)


------
#### [ Zoomed-in ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/hybrid-zoom.png)


------

## 專為世界設計
<a name="designed-for-the-world"></a>

混合樣式支援不同的政治檢視，確保地圖為您的使用者顯示正確的邊界。此樣式也允許在地圖標籤的語言之間輕鬆切換，並提供數十種支援的語言和撰寫系統，以確保在地化體驗。

# 映射 APIs
<a name="choose-maps-apis"></a>

地圖可為各種應用程式提供動態和靜態地圖類型的存取權。如需詳細資訊，請參閱 [Amazon Location Service Maps](maps.md)。
+ **動態貼圖**：可即時自訂的互動式貼圖，可讓使用者平移、縮放和覆蓋資料。如需詳細資訊，請參閱 [動態映射](dynamic-maps.md)。
+ **靜態貼**圖：貼圖的靜態影像，顯示沒有互動元素的特定位置或路由，適用於互動性有限的應用程式。如需詳細資訊，請參閱 [靜態地圖](static-maps.md)。

下表提供許多使用 Maps APIs 最佳解決的業務使用案例。

## 映射使用案例
<a name="maps-table"></a>

下一節介紹了許多使用 Maps APIs 最佳解決的業務使用案例。


| **業務需求** | **有用的 API** | **範例** | 
| --- | --- | --- | 
|  **顯示互動式地圖** 支援地圖手勢，例如縮放、平移、輕鬆、飛行、俯仰、旋轉和承載。  | `GetTile` 和 `GetStyleDescriptor` 搭配轉譯引擎 (MapLibre) | [如何顯示地圖](how-to-display-a-map.md) | 
|  **將標記新增至映射** 範例包括標記、圖示等。  |  `GetTile` 和 `GetStyleDescriptor` 搭配轉譯引擎 (MapLibre) | [如何在地圖上新增標記](how-to-add-marker-on-map.md) [如何在地圖上新增圖示](how-to-add-icon-on-map.md) | 
|  **將使用者互動元件新增至映射** 範例會以偏好的語言或地理政治檢視顯示地圖。 |  `GetTile` 和 `GetStyleDescriptor` 搭配轉譯引擎 (MapLibre) | [如何在地圖上新增控制項](how-to-add-control-on-map.md) [如何將彈出式視窗新增至地圖](how-to-add-popup-to-map.md) | 
| **在地圖上視覺化即時或預先記錄的資料** 例如熱度圖、KML、GeoJSON 功能、多邊形、矩形、多邊形、圓圈、標記等。 | `GetTile` 和 `GetStyleDescriptor` 搭配轉譯引擎 (MapLibre) | [如何在地圖上新增行](how-to-add-line-on-map.md) [如何在地圖上新增多邊形](how-to-add-polygon-on-map.md) | 
| **顯示具有當地語系化的地圖**範例會以偏好的語言或地理政治檢視顯示地圖。 |  `GetTile` 和 `GetStyleDescriptor` 搭配轉譯引擎 (MapLibre) | [如何設定地圖的偏好語言](how-to-set-preferred-language-map.md) [如何設定地圖的政治觀點](how-to-set-political-view-map.md) | 
| **顯示靜態地圖影像** 例如，在應用程式、電子郵件、報告或列印中使用映射映像。 | `GetStaticMap` | [如何取得特定位置的靜態映射](get-static-map-specific-position.md) [如何取得特定維度的靜態映射](get-static-map-specific-dimension.md) [如何決定靜態地圖的半徑和縮放](choose-radius-vs-zoom.md) [如何為靜態映射新增擴展](add-scale-static-map.md)  | 
| **將標記新增至映射映像** 範例包括標記、接近圓圈、圖示等。 | `GetStaticMap` | [如何將標記新增至靜態映射](add-marker-static-map.md) | 
| **視覺化地圖影像上的資料** 範例包括 GeoJSON 特徵、多邊形、矩形、多邊形、圓圈等。 |  `GetStaticMap` | [如何將線條新增至靜態地圖](how-to-add-line-static.md)  | 
| **在地圖上視覺化真實世界使用案例** 範例包括路由、鄰近圓圈等。 |  `GetStaticMap` | [如何將路由新增至靜態映射](how-to-add-route.md)  | 
| **在地圖上視覺化 Places 搜尋和/或地理碼結果 **所有 APIs 都會傳回地理座標，但自動完成除外。 | GetTile 和 GetStyleDescriptor 搭配 Places API 轉譯引擎 (MapLibre) |    | 
| **在地圖上繪製路由**支援航點標記。 | GetTile 和 GetStyleDescriptor 搭配轉譯引擎 (MapLibre) 搭配計算路由  |  | 
| **在地圖上視覺化相符的 GPS 追蹤 **支援旅行模式，例如卡車、行人、汽車和摩托車。 | GetStyleDescriptor 搭配 Snap to road 的轉譯引擎 (MapLibre)  |  | 

# 動態映射
<a name="dynamic-maps"></a>

**注意**  
您必須使用政治檢視功能來遵守適用的法律，包括與映射您透過 Amazon Location Service 存取的地圖、影像和其他資料所在的國家或地區相關的法律。

動態貼圖也稱為互動式貼圖，是支援手勢的數位貼圖，例如縮放、平移、輕鬆、飛行、俯仰、旋轉和承載。透過 Amazon Location Service，您可以建置地圖應用程式，為您的使用者提供反應靈敏、互動式且身歷其境的體驗。這些地圖可協助使用者根據使用者輸入視覺化和分析即時和歷史資料，讓他們能夠即時平移、縮放和探索地圖。Amazon Location Service 提供的地圖也支援多種語言和政治觀點。

進一步了解 [當地語系化和國際化](maps-localization-internationalization.md)。

如需此 API 的請求、回應、cURL 和 CLI 命令範例，請參閱[如何使用動態地圖](https://docs.aws.amazon.com/location/latest/developerguide/dynamic-maps-how-to.html)。

------
#### [ City ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/dynamic-city.png)


------
#### [ Roads ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/dynamic-roads.png)


------
#### [ Park ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/dynamic-parks.png)


------

如需 AWS 地圖樣式的詳細資訊，請參閱 [AWS 映射樣式和功能](map-styles.md)。

## 常用案例
<a name="common-use-cases"></a>

**分析和視覺化資料**  
將您的資料覆蓋在高品質地圖上，以發現轉換的空間模式和趨勢。讓您的團隊能夠使用地理資料建立可自訂的互動式地圖視覺化效果。使用地圖和資料來最佳化網站選擇、規劃基礎設施，或分析市場機會。

**增強房地產體驗**  
為潛在買方提供房地產清單的完整位置內容。顯示屬性的確切位置以及周邊鄰里詳細資訊，例如司法管轄區邊界、當地企業、公園和學校。協助客戶尋找通往開放房屋的指示，並建立資訊豐富、以位置為中心的房地產體驗。

**建立引人入勝的旅遊體驗**  
顯示動態地圖顯示目的地，其中包含詳細的街道檢視和主要地理功能。強調觀光客和旅客的興趣點，例如飯店、餐廳和景點。繪製戶外設施，例如遠足線索，以協助使用者規劃理想的行程。

## 轉譯動態貼圖
<a name="rendering-dynamic-map"></a>

地圖渲染引擎是一個程式庫，負責數位螢幕上地圖的視覺化渲染。轉譯引擎會將地圖圖磚 （演員、混合、衛星）、地圖資料 （點、線、多邊形） 或點陣資料 （影像） 拼接在一起，以在 Web 瀏覽器或原生應用程式中顯示互動式地圖。Amazon Location Service 建議使用 [MapLibre](https://github.com/maplibre/maplibre-gl-js) 轉譯引擎，同時支援 Web 和行動 (iOS 和 Android) 平台。MapLibre 也提供外掛程式模型，並支援以各種語言搜尋和路由的使用者介面。

如需詳細資訊，請參閱[建立您的第一個 Amazon Location Maps and Places 應用程式](first-app.md)。

## 請求地圖資產
<a name="requesting-map-assets"></a>

轉譯引擎使用對應樣式，其中包含對應圖磚、精靈 （圖示） 和 Glyphs （字型） 的參考。當使用者與映射互動時 - 載入、平移或縮放 - 轉譯引擎會使用所需的輸入參數呼叫 APIs （適用於圖磚、精靈和網格）。您也可以根據您的應用程式需求直接呼叫這些 APIs。

**地圖圖磚**  
小型方形圖磚，其中包含從伺服器擷取並由轉譯引擎組合的資料，以建立互動式數位地圖。

**地圖樣式**  
定義地圖視覺效果的規則集合，例如顏色和樣式。Amazon Location Service 遵循 [Mapbox GL 樣式規格](https://docs.mapbox.com/style-spec/guides/)。

**Glyph 檔案**  
包含編碼 Unicode 字元的二進位檔案，由映射轉譯器用來顯示文字標籤。

**Sprite 檔案**  
可攜式網路圖形 (PNG) 影像檔案，其中包含小型點陣影像，其中包含 JSON 檔案中的位置描述。地圖渲染器用來渲染地圖上的圖示或紋理。

# 圖磚
<a name="tiles"></a>

地圖圖磚是大型地圖的預先轉譯小區段，通常以方形影像顯示。它們只用來載入不同縮放層級的可見部分，以有效率地顯示地理資料。地圖圖磚有三種主要類型：

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)。

## 並排類型
<a name="tile-types"></a>

**向量映射圖磚**  
向量貼圖圖磚會將貼圖資料儲存為幾何形狀 （點、線、多邊形），而不是影像。這可建立高品質、可擴展的地圖，在任何解析度下都能保持清晰。

**點陣圖圖磚**  
點陣圖圖磚是代表特定地理區域的預先轉譯影像。與向量圖磚不同，點陣圖磚更簡單，但缺乏還原彈性。

**混合地圖圖磚**  
混合地圖圖磚結合了向量和點陣資料。它們將向量資料用於核心地圖元素，例如道路，同時使用點陣影像進行更複雜的元素，例如詳細的衛星或空中攝影。

## 向量圖磚層
<a name="vector-tiles-layers"></a>

以下是 10 層向量貼圖圖磚：
+ **邊界**：定義管理和地理邊界，包括國家、州和城市邊界。
+ **建築物和地址**：代表建築物形狀和詳細地址點。
+ **地球**：顯示地球、山脈和森林等自然特徵的全域地形和表面覆蓋範圍。
+ **土地使用**：顯示公園、農地和都會區域等分類區域。
+ **位置**：識別重要位置，例如城市、城市和值得注意的地標。
+ **興趣點 (POIs)**：重點介紹景點、企業和其他主要位置。
+ **道路**：代表街道、高速公路和通道的網路。
+ **道路標籤**：提供道路名稱和路由號碼的文字標籤。
+ **傳輸**：顯示公有交通線路，例如公車、火車和子線。
+ **水**：顯示水的主體，包括湖泊、河流和海洋。

## 使用案例
<a name="tiles-use-cases"></a>
+ 擷取地圖圖磚，以在各種縮放層級渲染地圖的不同區段。
+ 根據使用者互動最佳化地圖圖磚請求，例如平移和縮放。
+ 存取向量或點陣圖磚以進行詳細轉譯。

## 了解請求
<a name="tiles-understand-the-request"></a>

**注意**  
 對於 `ap-southeast-1`和 中的客戶`ap-southeast-5`，支援的請求和回應欄位可能會有所不同。如需詳細資訊，請參閱 [GetTile API 參考](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)。

請求需要下列參數：`Tileset`、`Y`、 `X`和 `Z`，以識別要擷取的特定圖磚。您可以選擇是否包含 `Key` 參數以進行授權。
+ **`Tileset`**：指定擷取圖磚所需的圖磚集。
+ **`X`**：映射圖磚的 X 軸值。
+ **`Y`**：對應圖磚的 Y 軸值。
+ **`Z`**：縮放值，定義圖磚的縮放層級。
+ **`Key`**：選擇性包含用於授權目的。

## 了解回應
<a name="tiles-understand-the-response"></a>

回應包含 `CacheControl`、 `ContentType`和 等標頭`ETag`，並以 MVT 格式包含地圖圖磚資料做為二進位 Blob。這些標頭會管理快取控制、提供內容格式詳細資訊，以及圖磚的版本控制。
+ **`CacheControl`**：控制對應圖磚的用戶端快取。
+ **`ContentType`**：指定並排資料的格式。
+ **`ETag`**：提供圖磚的版本識別符。
+ **`Blob`**：包含 MVT 格式的向量圖磚資料。

# 樣式動態貼圖
<a name="styling-dynamic-maps"></a>

Amazon Location Service 提供兩種設定動態地圖樣式的選項：使用預先設計的 AWS 地圖樣式，或使用樣式描述項自訂地圖樣式。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetStyleDescriptor](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStyleDescriptor.html)。

## 使用預先設計的 AWS 地圖樣式
<a name="using-aws-map-styles"></a>

AWS 映射樣式是預先定義的樣式，符合業界標準，以提供複雜且專業的外觀。透過在 Amazon Location Service 中利用這些樣式，您可以縮短time-to-market，並消除專用攝影師從頭建立地圖樣式的需求。

如需詳細資訊，請參閱[AWS 映射樣式和功能](map-styles.md)。

若要進一步了解預先定義的地圖樣式，請參閱：
+ [標準地圖樣式](map-styles.md#standard-map)
+ [單色地圖樣式](map-styles.md#monochrome-map)
+ [混合地圖樣式](map-styles.md#hybrid-map)
+ [衛星地圖樣式](map-styles.md#satellite-map)

## 將地圖樣式功能新增至您的 AWS 地圖
<a name="using-aws-map-features"></a>

AWS 地圖樣式功能可讓您使用進階樣式功能自訂地圖，包括地形、輪廓密度、流量，以及卡車或運輸覆蓋。這些新的自訂選項可讓您針對特定使用案例量身打造地圖外觀。

如需詳細資訊，請參閱[地圖功能](https://docs.aws.amazon.com/location/latest/developerguide/maps-concepts.html)。

## 使用 AWS 地圖樣式的優點
<a name="benefits-aws-map-styles"></a>
+ **時間和資源效率**： AWS 地圖樣式可讓您略過從頭開始設計地圖樣式的耗時和資源密集程序。這可讓您專注於核心功能，同時提供視覺上吸引人的地圖。
+ **專業且一致的美**術：熟練的攝影師擁有精心製作的 AWS 地圖風格，並遵循業界最佳實務。每個細節，從調色盤到標籤放置，都經過優化，以實現清晰度和易讀性。
+ **無縫整合**： AWS 映射樣式與您應用程式的設計語言無縫整合，為您的最終使用者提供完善且一致的映射體驗。

## 地圖 AWS 樣式入門
<a name="getting-started-aws-map-styles"></a>
+ **檢查 AWS 地圖樣式方案**：在 Amazon Location Service 主控台中，導覽至**地圖**區段以探索可用的樣式。
+ **選擇符合您需求的樣式**：選取最符合您應用程式設計和使用者體驗需求的樣式。
+ **整合樣式**：遵循提供的文件，使用 Amazon Location Service APIs 或 SDKs 將所選樣式整合到您的應用程式。

進一步了解 [如何顯示地圖](how-to-display-a-map.md)。

## 使用案例
<a name="use-cases"></a>
+ 根據顏色方案自訂地圖樣式，例如 `Light`或 `Dark`。
+ 根據特定政治觀點或地理邊界顯示地圖。
+ 針對不同的使用案例最佳化地圖樣式，例如物流、戶外活動、具有流量資料的導覽，以及運輸特定路由。

## 了解請求
<a name="dynamic-understand-the-request"></a>

**注意**  
 對於 `ap-southeast-1`和 中的客戶`ap-southeast-5`，支援的請求和回應欄位可能會有所不同。如需詳細資訊，請參閱 [GetStyleDescriptor API 參考](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStyleDescriptor.html)。

請求支援 `ColorScheme`、 和 等參數`Key`，`PoliticalView`以定義映射的樣式和呈現。需要 `Style` 參數才能指定所需的映射樣式。
+ **`ColorScheme`**：設定地圖的調色盤，例如 `Light`或 `Dark`。
+ **`PoliticalView`**：指定地圖視覺化的政治檢視。
+ **`Style`**：定義地圖的樣式，例如 `Standard`或 `Monochrome`。
+ **`Terrain`**：透過海拔陰影和地理反白顯示地形功能。
+ **`ContourDensity`**：使用不同密度層級的高度等高線，顯示地形形狀和陡峭度。
+ **`Traffic`**：覆蓋地圖上的即時流量條件。
+ **`TravelMode`**：顯示運輸資訊，包括具有道路限制的公有運輸系統或卡車路線。

## 了解回應
<a name="dynamic-understand-the-response"></a>

回應提供 `CacheControl`、 `ContentType`和 等標頭`ETag`，並包含做為 JSON Blob 的樣式描述項。標頭提供快取資訊、內容格式詳細資訊，以及樣式變更的版本控制。
+ **`CacheControl`**：控制樣式描述項的快取組態。
+ **`ContentType`**：表示回應格式為 JSON。
+ **`ETag`**：提供樣式描述項的版本識別符。
+ **`Blob`**：包含 JSON 格式的樣式描述項內文。

## 自訂樣式描述項
<a name="customizing-style-descriptor"></a>

若要自訂映射樣式，您必須了解樣式描述項的結構，通常是定義映射元素視覺化呈現的 JSON 物件。樣式描述項包含數個圖層，每個圖層都會控制特定類型地圖元素的樣式，例如道路、公園、建築物或標籤。
+ **使用預先定義的樣式描述項做為基礎**：您可以從預先定義的樣式描述項開始，或使用 [Maputnik](https://maputnik.github.io/) 等地圖樣式編輯器從頭開始建立。
+ **了解結構**：樣式描述項是包含圖層的階層式 JSON 物件，每個都代表不同的映射元素。每個圖層都有屬性來控制該元素的視覺外觀，例如顏色、不透明度和線條寬度。
+ **修改圖層樣式**：根據您使用的映射樣式編輯器，您可以變更現有的圖層或新增新的圖層來自訂樣式。例如，您可以調整道路的顏色、修改標籤的字型大小，或針對特定位置新增自訂圖示。
+ **定義不同縮放層級的樣式**：地圖樣式編輯器可讓您定義不同縮放層級的不同樣式，這有助於根據使用者縮放互動來控制細節層級和可見性。
+ **測試和重複**：修改或建立樣式描述項之後，請在地圖上測試自訂樣式，以確保其如預期般顯示。反覆運算並調整，直到您達到所需的視覺效果樣式為止。

# 樣式圖示圖與精靈
<a name="styling-iconography-with-sprites"></a>

精靈是可攜式網路圖形 (PNG) 影像檔案，其中包含小型點陣影像，例如圖示、標記，以及在地圖上轉譯的其他元素。精靈可以根據樣式、顏色方案和變體等參數進行自訂。Amazon Location Service 透過 `GetSprites` API 提供精靈工作表。您也可以透過載入您自己的圖示集 （請參閱[如何在地圖上新增圖示](how-to-add-icon-on-map.md)) 或自訂樣式描述項來載入自訂精靈，來使用自訂圖示。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetSprites](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetSprites.html)。

## 使用案例
<a name="use-cases"></a>
+ 針對特定樣式和顏色方案使用精靈工作表轉譯自訂地圖元素。
+ 擷取各種地圖樣式的精靈，例如標準、單色或混合。
+ 透過修改精靈在地圖上自訂圖示圖形。

## 了解請求
<a name="styling-understand-the-request"></a>

請求需要 URI 參數，例如 `ColorScheme`、 `FileName`和 `Style`。這些參數允許根據映射的顏色方案、樣式和所需的特定精靈檔案來自訂精靈工作表。
+ **`ColorScheme`**：定義精靈的顏色方案，例如 "Light" 或 "Dark"。
+ **`FileName`**：要擷取的精靈檔案名稱，可以是 PNG 或 JSON 檔案。
+ **`Style`**：指定映射樣式，例如 "Standard" 或 "Monochrome"。

## 了解回應
<a name="styling-understand-the-response"></a>

回應包含 `CacheControl`、 `ContentType`和 等標頭`ETag`，並以二進位 Blob 或 JSON 檔案的形式傳回精靈資料。這些標頭提供快取資訊、回應的內容類型，以及精靈資料的版本控制。
+ **`CacheControl`**：快取精靈檔案的組態。
+ **`ContentType`**：回應的格式，指出其包含 PNG 或 JSON 資料。
+ **`ETag`**：精靈版本的識別符，用於快取驗證。
+ **`Blob`**：包含精靈工作表或 JSON 位移檔案的內文。

------
#### [ Standard Light ]

![\[Collection of colorful icons representing various services and concepts in cloud computing.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/styling-standard-light.png)


------
#### [ Standard Dark ]

![\[Collection of colorful icons and shapes representing various services and concepts.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/styling-standard-dark.png)


------
#### [ Monochrome Light ]

![\[Collection of various icons and shapes representing different concepts and services.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/styling-monochrome-light.png)


------
#### [ Monochrome Dark ]

![\[Collection of various icons and shapes representing different concepts and services.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/styling-monochrome-dark.png)


------
#### [ Hybrid ]

![\[Collection of colorful icons representing various travel, transportation, and service symbols.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/styling-hybrid.png)


------

# Glyphs 樣式標籤
<a name="styling-labels-with-glyphs"></a>

Glyphs 是包含編碼 Unicode 字元的二進位檔案，由映射轉譯器用來顯示標籤。Amazon Location Service 可讓您從字型堆疊擷取特定 Glyph，以用於透過 `GetGlyphs` API 轉譯地圖。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetGlyphs](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetGlyphs.html)。

## 使用案例
<a name="glyphs-use-cases"></a>
+ 在具有特定字型和樣式的地圖上轉譯自訂文字。
+ 擷取 Glyphs 以進行當地語系化地圖文字轉譯。
+ 使用 Unicode 字元範圍來顯示映射標籤和符號。
+ 根據字型堆疊和 Glyph 範圍最佳化地圖字型轉譯。

## API 中支援的字型
<a name="supported-fonts"></a>

API 支援下列字型：
+ Amazon Ember 粗體
+ Amazon Ember 粗體斜體
+ Amazon Ember Bold、Noto Sans Bold
+ Amazon Ember Bold、Noto Sans Bold、Noto Sans Arabic Bold
+ Amazon Ember 精簡 RC BdItalic
+ Amazon Ember 精簡 RC 粗體
+ Amazon Ember 精簡 RC 粗體斜體
+ Amazon Ember Condensed RC Bold、Noto Sans Bold
+ Amazon Ember Condensed RC Bold、Noto Sans Bold、Noto Sans Arabic Condensed Bold
+ Amazon Ember 精簡 RC Light
+ Amazon Ember 精簡 RC Light Italic
+ Amazon Ember 精簡 RC LtItalic
+ Amazon Ember 精簡 RC 一般
+ Amazon Ember 精簡 RC 一般斜體
+ Amazon Ember Condensed RC Regular、Noto Sans Regular
+ Amazon Ember Condensed RC Regular、Noto Sans Regular、Noto Sans Arabic Condensed Regular
+ Amazon Ember 精簡 RC RgItalic
+ Amazon Ember 精簡 RC ThItalic
+ Amazon Ember 精簡版 RC 精簡版
+ Amazon Ember 精簡 RC 精簡斜體
+ Amazon Ember Heavy
+ Amazon Ember 重斜體
+ Amazon Ember Light
+ Amazon Ember Light 斜體
+ Amazon Ember 媒體
+ Amazon Ember 中型斜體
+ Amazon Ember Medium、Noto Sans Medium
+ Amazon Ember Medium、Noto Sans Medium、Noto Sans Arabic Medium
+ Amazon Ember 一般
+ Amazon Ember 一般斜體
+ Amazon Ember 一般斜體、Noto Sans 斜體
+ Amazon Ember Regular Italic、Noto Sans Italic、Noto Sans Arabic Regular
+ Amazon Ember Regular、Noto Sans Regular
+ Amazon Ember Regular、Noto Sans Regular、Noto Sans Arabic Regular
+ Amazon Ember 精簡版
+ Amazon Ember 精簡斜體
+ AmazonEmberCdRC\$1Bd
+ AmazonEmberCdRC\$1BdIt
+ AmazonEmberCdRC\$1Lt
+ AmazonEmberCdRC\$1LtIt
+ AmazonEmberCdRC\$1Rg
+ AmazonEmberCdRC\$1RgIt
+ AmazonEmberCdRC\$1Th
+ AmazonEmberCdRC\$1ThIt
+ AmazonEmber\$1Bd
+ AmazonEmber\$1BdIt
+ AmazonEmber\$1He
+ AmazonEmber\$1HeIt
+ AmazonEmber\$1Lt
+ AmazonEmber\$1LtIt
+ AmazonEmber\$1Md
+ AmazonEmber\$1MdIt
+ AmazonEmber\$1Rg
+ AmazonEmber\$1RgIt
+ AmazonEmber\$1Th
+ AmazonEmber\$1ThIt
+ Noto Sans 黑色
+ Noto Sans 黑色斜體
+ Noto Sans 粗體
+ Noto Sans 粗體斜體
+ Noto Sans Extra Bold
+ Noto Sans Extra Bold 斜體
+ Noto Sans 額外光源
+ Noto Sans 超輕量斜體
+ Noto Sans 斜體
+ Noto Sans Light
+ Noto Sans Light 斜體
+ Noto Sans 中型
+ Noto Sans 中型斜體
+ Noto Sans 一般
+ Noto Sans 半粗體
+ Noto Sans 半粗體斜體
+ Noto Sans 精簡型
+ Noto Sans 精簡斜體
+ NotoSans-Bold
+ NotoSans-義大利文
+ NotoSans-Medium
+ NotoSans-Regular
+ 開啟 Sans Regular、Arial Unicode MS Regular

## 了解請求
<a name="glyphs-understand-the-request"></a>

請求接受兩個必要的 URI 參數 `FontStack`和 `FontUnicodeRange`，這會決定 Glyphs 的字型和 Unicode 範圍。`FontStack` 參數指定要使用的字型，而 `FontUnicodeRange`定義要擷取的字元範圍。請求不包含內文，僅專注於其功能的 URI 參數。
+ **`FontStack`**：指定要擷取的字型堆疊名稱。範例：「Amazon Ember Bold， Noto Sans Bold」。
+ **`FontUnicodeRange`**：要下載 Glyphs 的 Unicode 字元範圍。範圍必須是 256 的倍數。範例：「0-255」。

## 了解回應
<a name="glyphs-understand-the-response"></a>

回應會以二進位 Blob 的形式傳回 Glyph 資料，以及用於快取、內容類型、ETag 和定價資訊的 HTTP 標頭。Glyph 資料會以二進位 Blob 傳回，以在地圖上呈現，而且標頭提供額外的中繼資料，以有效處理回應。
+ **`CacheControl`**：指示用戶端針對回應進行快取組態。
+ **`ContentType`**：指定回應內文的格式，指出傳回的 glyph 資料類型。
+ **`ETag`**：Glyph 版本的識別符，用於快取驗證。
+ **`PricingBucket`**：指出與請求相關聯的定價方案。
+ **`Blob`**：作為二進位 Blob 傳回的 Glyph 資料，用於轉譯映射文字。

# 靜態地圖
<a name="static-maps"></a>

**注意**  
靜態映射僅支援標準和衛星樣式。如需詳細資訊，請參閱[AWS 映射樣式和功能](map-styles.md)。

靜態貼圖提供地理資料的預先轉譯表示法，並可選擇為您的應用程式覆蓋標記 （或接腳）、路由和多邊形區域。靜態映射可讓您根據可自訂的參數和資料輸入產生靜態 （非互動式） 映射映像。透過自訂浮水印、形狀或套用自訂樣式，Static Map 可讓您建立符合特定需求的地圖視覺化效果，增強最終使用者體驗並有效傳達地理資訊。伺服器會自訂請求的映射映像，並以 JPEG 檔案的形式將其交付給用戶端。您可以程式設計方式請求和產生根據您的特定需求量身打造的地圖影像。

*GetStaticMap API* 會根據中心座標、週框方塊或浮水印等指定參數產生地圖的靜態影像。API 允許自訂地圖功能和樣式，可在沒有互動式地圖功能的 Web 或行動應用程式中使用。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)。

如需此 API 的請求、回應、cURL 和 CLI 命令範例，請參閱[如何使用靜態映射](https://docs.aws.amazon.com/location/latest/developerguide/static-maps-how-to.html)。

## 常用案例
<a name="static-maps-use-cases"></a>
+ **Web 或行動應用程式中的內嵌地圖：**靜態地圖影像可以有效地內嵌在網站或行動應用程式中，以非互動式地圖提供位置、路由或興趣點的視覺化效果，從而減少載入時間和資料用量。範例包括搜尋引擎 （例如 Yahoo)，顯示具有 POIs 搜尋結果的地圖影像。
+ **電子郵件中的位置詳細資訊：**靜態地圖影像可用來透過電子郵件共用位置資訊，以協助最終使用者了解電子郵件的內容。例如，食品交付或共乘應用程式使用靜態地圖影像，在包含帳單和摘要的往返或交付電子郵件中顯示取件/投遞地點、路由或周邊區域。
+ **行銷資料和列印文件：**自訂靜態地圖影像可以整合到手冊、傳單或其他列印資料中，提供與內容相關的地理資訊視覺效果。

## 了解請求
<a name="static-maps-understanding-request"></a>

請求包含選用的 URI 參數，例如 `BoundedPositions`、 `BoundingBox`和 `Center`等，以定義地圖的可見區域和浮水印。定義影像大小`Width`時需要參數 `Height`和 。如需了解詳細資訊，請參閱 [自訂靜態地圖](customizing-static-maps.md) 和 [靜態地圖上的浮水印](overlaying-static-map.md)。
+ `BoundedPositions`：在影像中包含的座標。
+ `BoundingBox`：座標定義地圖的西南和東北邊緣。
+ `Height`：指定影像的高度。
+ `Width`：指定影像的寬度。
+ `GeoJsonOverlay`：用於新增浮水印的有效 GeoJSON 物件。

## 了解回應
<a name="static-maps-understanding-response"></a>

回應包含 `CacheControl`、 `ContentType`和 等標頭`ETag`，並以 JPEG 或 PNG 格式的二進位 Blob 格式傳回靜態映射。標頭提供中繼資料，例如快取控制、內容類型和靜態映像的版本。
+ `CacheControl`：指定映射映像的快取組態。
+ `ContentType`：表示映射影像的格式 (JPEG 或 PNG)。
+ `ETag`：靜態地圖影像版本的識別符。
+ `Blob`：代表 JPEG 或 PNG 格式的映射影像。

# 自訂靜態地圖
<a name="customizing-static-maps"></a>

**注意**  
靜態貼圖僅支援衛星樣式。如需詳細資訊，請參閱[AWS 映射樣式和功能](map-styles.md)。

本節概述如何自訂使用 Amazon Location Service 產生的靜態地圖。它涵蓋各種功能，例如調整地圖的位置、大小、語言、縮放、浮水印和歸因，讓您能夠根據特定需求量身打造地圖。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)。

## 位置
<a name="customizing-static-maps-position"></a>

位置可讓您定義地圖的中心和邊界。您可以透過設定中心座標、週框方塊，或使用縮放層級來決定要顯示多少區域，來控制地圖的焦點。若要了解其運作方式，請參閱 [如何取得特定位置的靜態映射](get-static-map-specific-position.md)。
+ `Center`：使用經度和緯度座標定義地圖的中心點。
+ `Radius`：指定將在靜態地圖上顯示的半徑 （與中心的距離）。
+ `Bounding Box`：定義地圖的矩形區域，透過提供左上角和右下角的座標來設定。
+ `Zoom`：控制地圖的縮放層級。較高的縮放層級會在較小的區域中顯示更多細節，而較低的縮放層級則會在較大的區域中顯示較少的細節。

## 維度和品質
<a name="customizing-static-maps-dimension-quality"></a>

您可以定義靜態地圖的大小和視覺效果品質，方法是定義其維度 （高度和寬度），並新增填補，以便更好地呈現標記和其他元素。若要了解其運作方式，請參閱 [如何取得特定維度的靜態映射](get-static-map-specific-dimension.md)。
+ `Height and Width`：定義靜態地圖影像的高度和寬度，以像素為單位。
+ `Padding`：在地圖邊緣周圍新增額外的空間，以便在放置標記、線條或形狀時獲得更好的視覺化效果。

## 擴展
<a name="customizing-static-maps-scale"></a>

縮放可讓您控制地圖的縮放，並定義測量距離的單位 （公里、英里）。這有助於準確代表地圖的大小和距離關係。若要了解其運作方式，請參閱 [如何為靜態映射新增擴展](add-scale-static-map.md)。
+ `Scale Unit`：定義地圖縮放桿的單位 （例如，公里或英里），允許使用者準確測量地圖上的距離。

## 浮水印
<a name="customizing-static-maps-overlay"></a>

您可以新增標記、顯示路由的線條、顯示區域的多邊形等等。若要了解其運作方式，請參閱 [如何將標記新增至靜態映射](add-marker-static-map.md)、 [如何將線條新增至靜態地圖](how-to-add-line-static.md)或 [如何將路由新增至靜態映射](how-to-add-route.md)。

# 靜態地圖上的浮水印
<a name="overlaying-static-map"></a>

本節說明如何使用 Amazon Location Service 將其他資訊疊加到靜態地圖上。您可以新增各種地理特徵來自訂靜態地圖，例如點、線和多邊形，以增強地圖的視覺化呈現。Amazon Location Service 支援多種格式，包括 GeoJSON 和精簡的浮水印格式，以提供靈活且有效率的浮水印新增方式。

如需詳細資訊，請參閱《*Amazon Location Service API 參考*》中的 [GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)。

## 使用 GeoJSON
<a name="overlaying-static-map-geojson"></a>

GeoJSON 是一種多樣化的格式，可讓您在靜態地圖上覆蓋自訂資料。透過定義點、線和多邊形等地理特徵，您可以增強地圖的視覺呈現，為使用者提供有價值的內容。GeoJSON 受到廣泛支援，在設計和自訂地圖浮水印時提供靈活性，使其成為顯示區域、繪製路由或顯示空間關係的理想格式。

透過 Amazon Location Service，您可以利用 GeoJSON 將動態、以位置為基礎的功能直接新增至靜態地圖。這可讓您建立高度可自訂的浮水印，這些浮水印可根據您的特定業務需求量身打造。GeoJSON 支援多種幾何類型，包括 `Point`、`Polygon`、 `LineString`和 `MultiPolygon`，可讓您顯示從標記和路由到複雜區域表示法的各種功能。

## 顏色
<a name="overlaying-static-map-geojson-colors"></a>

設計 GeoJSON 功能時，您可以靈活定義顏色。您可以使用不同的格式指定顏色，例如十六進位值 （例如 \$1ff0000 表示紅色） 或 Alpha 透明度 （例如 \$1ff000080 表示半透明紅色）。這可確保浮水印的視覺效果與地圖樣式一致。如果未指定顏色，則會套用所選映射樣式的預設顏色。

## 繪製順序
<a name="overlaying-static-map-drawing-order"></a>

自訂浮水印會以特定順序繪製，以保持清晰度並避免視覺雜亂。在 Amazon Location Service 中，多邊形、線條和點等浮水印功能會顯示在基本地圖上方，但位於地圖標籤下方。繪製順序會先排定多邊形的優先順序，接著是線條，然後是點或標記。

## 測量單位
<a name="overlaying-static-map-measurement-units"></a>

對於 `width`和 等屬性`outline-width`，您可以使用不同的測量單位來指定大小，包括像素 (px)、公尺 (m)、公里 (km)、英里 (mi) 和百分比 (%)。百分比單位會調整相對於預設值的屬性，在設計浮水印時提供更多彈性。

## 幾何類型
<a name="overlaying-static-map-geometry-types"></a>

Amazon Location Service 支援多種 GeoJSON 幾何類型，例如 `Point`、`LineString`、 `Polygon`和 `MultiPolygon`。每個幾何類型都可以使用 GeoJSON 中的屬性物件進行樣式和調整，允許廣泛自訂地圖上的標記、路由和區域。

## 使用精簡浮水印
<a name="overlaying-static-map-compact-overlay"></a>

**注意**  
精簡浮水印支援下列幾何類型：點、線和多邊形。它不支援 `multiPoint`、 `multiLine`或 `multiPolgyon`。

精簡的浮水印選項可讓您使用單一查詢參數，在靜態地圖上有效率地顯示多個幾何。此簡化方法可簡化請求格式，並減少請求的大小，讓您更輕鬆地傳輸浮水印資料。客戶可以在一個查詢參數中輸入各種幾何類型及其對應的樣式屬性，Amazon Location Service 將透過剖析和轉譯指定的浮水印來處理繁重的工作。

使用精簡的浮水印格式時，請記住請求 URL 的大小有所限制。雖然 Amazon Location Service 會最佳化查詢，但請確保您的請求保持在合理的限制內，特別是在處理多個幾何及其相關聯的屬性時。

## 格式
<a name="overlaying-static-map-compact-overlay-format"></a>

精簡浮水印格式的結構如下： `geometry_type:geometry;property_1=value_1;property_2=value_2|geometry_type:geometry;property_1=value_1...`

每個幾何類型都會與其樣式屬性一起定義。多個幾何由管道運算子 (\$1) 分隔，而每個幾何的屬性則使用分號分隔。

## 支援的幾何類型
<a name="overlaying-static-map-supported-geometry-types"></a>

Amazon Location Service 支援多種幾何類型，包括 `Point`、`MultiPoint`、`LineString`、 `Polygon`和 `MultiPolygon`。這些幾何類型可以使用精簡的浮水印格式，在相同的查詢參數中組合和設計樣式。

## 樣式屬性
<a name="overlaying-static-map-styling-properties"></a>

您可以使用各種樣式屬性來自訂每個幾何，例如顏色、輪廓顏色、大小等。這些屬性可讓您控制地圖上每個幾何的外觀，確保浮水印符合您的業務需求。

# 如何
<a name="maps-how-to"></a>

本節包含各種如何使用 Maps APIs的指南和範例。

**Topics**
+ [如何使用動態地圖](dynamic-maps-how-to.md)
+ [如何使用靜態地圖](static-maps-how-to.md)

# 如何使用動態地圖
<a name="dynamic-maps-how-to"></a>

這些教學主題提供全面的逐步解說，說明如何使用 Amazon Location Service 增強映射應用程式。從顯示互動式地圖到新增標記、線條和多邊形，這些教學課程示範如何使用基本功能，例如設定地圖控制、新增自訂圖示和處理即時資料。此外，主題也涵蓋當地語系化和國際化方面，例如設定偏好的語言、調整政治觀點，以及根據使用者的位置或觀點自訂地圖內容，以確保符合區域法律。

每個操作方式都設計為可存取，並提供step-by-step說明。 MapLibre 無論您的目標是使用自訂圖示和快顯視窗建立動態地圖體驗，還是針對特定政治觀點和語言量身打造地圖檢視，這些範例都可協助您實現目標，同時確保不同區域的使用者有豐富的當地語系化地圖體驗。這些教學課程可確保您可以充分利用 Amazon Location Service 的功能，從基本映射函數到複雜的地緣政治和當地語系化需求。

**Topics**
+ [如何顯示地圖](how-to-display-a-map.md)
+ [如何在地圖上新增控制項](how-to-add-control-on-map.md)
+ [如何在地圖上新增標記](how-to-add-marker-on-map.md)
+ [如何在地圖上新增圖示](how-to-add-icon-on-map.md)
+ [如何在地圖上新增行](how-to-add-line-on-map.md)
+ [如何在地圖上新增多邊形](how-to-add-polygon-on-map.md)
+ [如何將彈出式視窗新增至地圖](how-to-add-popup-to-map.md)
+ [如何設定地圖的偏好語言](how-to-set-preferred-language-map.md)
+ [如何設定地圖的政治觀點](how-to-set-political-view-map.md)
+ [如何在地圖上篩選 POI](how-to-filter-poi-map.md)
+ [如何建立地形貼圖](how-to-create-topographic-maps.md)
+ [如何在地圖上顯示即時流量](how-to-set-real-time-traffic-map.md)
+ [如何建立物流地圖](how-to-create-logistic-map.md)
+ [如何在地圖上顯示傳輸詳細資訊](how-to-show-transit-details-map.md)
+ [如何建立 3D 映射](how-to-create-a-3d-map.md)

# 如何顯示地圖
<a name="how-to-display-a-map"></a>

Amazon Location Service 可讓您使用我們的地圖樣式來顯示互動式和非互動式地圖。如需進一步了解，請參閱[AWS 映射樣式和功能](map-styles.md)。

## 互動式地圖
<a name="interactive-map"></a>

在此範例中，您將顯示互動式地圖，允許使用者縮放、平移、捏合和俯仰。

### 互動式地圖程式碼範例
<a name="interactive-map-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [25.24, 36.31], // starting position [lng, lat]
                zoom: 2, // starting zoom
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 限制超出 區域的地圖平移
<a name="restrict-map-panning"></a>

在此範例中，您將限制映射被平移超過定義的界限。

### 限制映射平移程式碼範例
<a name="restrict-map-panning-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            var bounds = [
                [90.0, -21.943045533438166], // Southwest coordinates
                [146.25, 31.952162238024968] // Northeast coordinates
            ];

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                maxBounds: bounds, // Sets bounds of SE Asia
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 非互動式映射
<a name="non-interactive-map"></a>

在此範例中，您將停用使用者互動，以顯示非互動式地圖。

### 非互動式地圖程式碼範例
<a name="non-interactive-map-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [25.24, 36.31], // starting position [lng, lat]
                zoom: 2, // starting zoom
                interactive: false, // Disable pan & zoom handlers
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地圖上新增控制項
<a name="how-to-add-control-on-map"></a>

Amazon Location Service 可讓您將多個控制項新增至地圖，包括導覽、地理位置、全螢幕、擴展和歸因控制項。
+ **導覽控制**：包含縮放按鈕和羅盤。
+ **地理位置控制**：提供使用瀏覽器地理位置 API 在地圖上尋找使用者的按鈕。
+ **全螢幕控制**：包含用於切換地圖進入和退出全螢幕模式的按鈕。
+ **縮放控制**：顯示地圖上距離與地面上對應距離的比率。
+ **屬性控制**：顯示地圖的屬性資訊。根據預設，屬性控制項會展開 （無論地圖寬度為何）。

您可以將控制項新增至地圖的任何角落：左上角、左下角、右下角或右上角。

## 新增地圖控制項
<a name="add-map-controls"></a>

在下列範例中，您將新增上面列出的地圖控制項。

### 映射控制程式碼範例
<a name="web-code-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Controls</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.13203602550998, 49.28726257639254], // starting position [lng, lat]
                zoom: 10, // starting zoom
                attributionControl: false, // hide default attributionControl in bottom left
            });

            // Adding controls to the map
            map.addControl(new maplibregl.NavigationControl()); // Zoom and rotation controls
            map.addControl(new maplibregl.FullscreenControl()); // Fullscreen control
            map.addControl(new maplibregl.GeolocateControl()); // Geolocation control
            map.addControl(new maplibregl.AttributionControl(), 'bottom-left'); // Attribution in bottom-left
            map.addControl(new maplibregl.ScaleControl(), 'bottom-right'); // Scale control in bottom-right
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 開發人員秘訣
<a name="developer-tips"></a>

### 導覽控制選項
<a name="navigationcontrol-options"></a>

```
new maplibregl.NavigationControl({ 
    showCompass: true, // show or hide compass (default: true)
    showZoom: true // show or hide zoom controls (default: true)
});
```

### 地理位置控制選項
<a name="geolocatecontrol-options"></a>

```
new maplibregl.GeolocateControl({ 
    positionOptions: { enableHighAccuracy: true }, // default: false
    trackUserLocation: true // default: false
});
```

### 屬性控制選項
<a name="attributioncontrol-options"></a>

```
new maplibregl.AttributionControl({
    compact: true, // compact (collapsed) mode (default: false)
});
```

### 擴展控制選項
<a name="scalecontrol-options"></a>

```
new maplibregl.ScaleControl({ 
    maxWidth: 100, // width of the scale (default: 50)
    unit: 'imperial' // imperial or metric (default: metric)
});
```

### 全螢幕控制選項
<a name="fullscreencontrol-options"></a>

```
map.addControl(new maplibregl.FullscreenControl({
    container: document.querySelector('body') // container for fullscreen mode
}));
```

# 如何在地圖上新增標記
<a name="how-to-add-marker-on-map"></a>

使用 Amazon Location，您可以同時新增固定和可拖曳的標記，也可以根據您的資料和偏好設定自訂標記的顏色。

## 新增固定標記
<a name="add-marker"></a>

### 固定標記程式碼範例
<a name="web-code-example-fixed-marker"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker() // Create fixed marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 新增可拖曳標記
<a name="add-draggable-marker"></a>

### 可拖曳標記程式碼範例
<a name="web-code-example-draggable-marker"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add draggable marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker({ draggable: true }) // Create draggable marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 變更標記顏色
<a name="change-marker-color"></a>

### 彩色標記程式碼範例
<a name="web-code-example-change-marker-color"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Adding colorful marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Monochrome";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker({ color: "black" }) // Create colored marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 新增多個標記
<a name="add-multiple-markers"></a>

### 多個標記程式碼範例
<a name="web-code-example-multiple-markers"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Adding multiple markers on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const colorScheme ="Dark"; // e.g., Dark, Light (default)
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const locations = [
                { lng: 85.1376, lat: 25.5941, label: 'Patna', color: '#FF5722' }, 
                { lng: 77.1025, lat: 28.7041, label: 'Delhi', color: '#2196F3' }, 
                { lng: 77.5946, lat: 12.9716, label: 'Bangalore', color: '#FF9800' }, 
                { lng: 78.4867, lat: 17.3850, label: 'Hyderabad', color: '#9C27B0' }, 
                { lng: -87.6298, lat: 41.8781, label: 'Chicago', color: '#4CAF50' }, 
                { lng: -122.3321, lat: 47.6062, label: 'Seattle', color: '#FFC107' }, 
                { lng: 4.3517, lat: 50.8503, label: 'Brussels', color: '#3F51B5' },   
                { lng: 2.3522, lat: 48.8566, label: 'Paris', color: '#E91E63' },   
                { lng: -0.1276, lat: 51.5074, label: 'London', color: '#795548' },  
                { lng: 28.0473, lat: -26.2041, label: 'Johannesburg', color: '#673AB7' },  
                { lng: -123.1216, lat: 49.2827, label: 'Vancouver', color: '#FF5722' }, 
                { lng: -104.9903, lat: 39.7392, label: 'Denver', color: '#FF9800' }, 
                { lng: -97.7431, lat: 30.2672, label: 'Austin', color: '#3F51B5' }  
            ];

            // Loop through the locations array and add a marker for each one
            locations.forEach(location => {           
                const marker = new maplibregl.Marker({ color: location.color, draggable: true }) // Create colored marker
                    .setLngLat([location.lng, location.lat]) // Set longitude and latitude
                    .addTo(map); // Add marker to the map
            }); 
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地圖上新增圖示
<a name="how-to-add-icon-on-map"></a>

Amazon Location Service 可讓您將圖示，最好是 PNG 格式的圖示新增至映射。您可以將圖示新增至特定地理位置，並視需要建立樣式。

## 新增靜態圖示
<a name="add-static-icon"></a>

在此範例中，您將使用外部 URL，使用符號層將圖示新增至地圖。

### 靜態圖示程式碼範例
<a name="web-code-example-static-icon"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Static icon on map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver)
                zoom: 12, // starting zoom
            });

            map.on('load', async () => {
                image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png');
                map.addImage('biking', image.data);
                map.addSource('point', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [-123.1144289, 49.2806672]
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    'id': 'points',
                    'type': 'symbol',
                    'source': 'point',
                    'layout': {
                        'icon-image': 'biking',
                        'icon-size': 0.25
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地圖上新增行
<a name="how-to-add-line-on-map"></a>

使用 Amazon Location Service，您可以將預先錄製的 GPS 追蹤新增為行字串，並將即時 GPS 追蹤新增至動態地圖。

## 新增預先錄製的行
<a name="add-pre-recorded-line"></a>

在此範例中，您將將預先錄製的 GPS 追蹤做為 GeoJSON (main.js) 新增至動態地圖。若要這樣做，您需要將來源 （例如 GeoJSON) 和具有您選擇的線條樣式的圖層新增至映射。

### 預先錄製的行碼範例
<a name="web-code-example-pre-recorded-line"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add a line on the map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.126575, 49.290585],
                zoom: 12.5
            });

            map.on('load', () => {
                map.addSource('vancouver-office-to-stanley-park-route', {
                    type: 'geojson',
                    data: routeGeoJSON
                });

                map.addLayer({
                    id: 'vancouver-office-to-stanley-park-route',
                    type: 'line',
                    source: 'vancouver-office-to-stanley-park-route',
                    layout: {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const routeGeoJSON = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: [
                    [-123.117011, 49.281306],
                    [-123.11785, 49.28011],
                    ...
                    [-123.135735, 49.30106]
                ]
            },
            properties: {
                name: "Amazon YVR to Stanley Park",
                description: "An evening walk from Amazon office to Stanley Park."
            }
        }
    ]
};
```

------

## 即時新增行
<a name="add-real-time-line"></a>

在此範例中，您將模擬逐個新增 GPS 座標，以建立即時 GPS 追蹤。這對於追蹤即時資料更新很有用。

### 即時行程式碼範例
<a name="web-code-example-real-time-line"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add a line on the map in real-time</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.126575, 49.290585],
                zoom: 12.5
            });

            map.on('load', () => {
                const coordinates = routeGeoJSON.features[0].geometry.coordinates;
                routeGeoJSON.features[0].geometry.coordinates = [coordinates[0], coordinates[20]];

                map.addSource('vancouver-office-to-stanley-park-route', {
                    type: 'geojson',
                    data: routeGeoJSON
                });

                map.addLayer({
                    id: 'vancouver-office-to-stanley-park-route',
                    type: 'line',
                    source: 'vancouver-office-to-stanley-park-route',
                    layout: {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });

                map.jumpTo({center: coordinates[0], zoom: 14});
                map.setPitch(30);

                let i = 0;
                const timer = window.setInterval(() => {
                    if (i < coordinates.length) {
                        routeGeoJSON.features[0].geometry.coordinates.push(coordinates[i]);
                        map.getSource('vancouver-office-to-stanley-park-route').setData(routeGeoJSON);
                        map.panTo(coordinates[i]);
                        i++;
                    } else {
                        window.clearInterval(timer);
                    }
                }, 100);
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const routeGeoJSON = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: [
                    [-123.117011, 49.281306],
                    [-123.11785, 49.28011],
                    ...
                    [-123.135735, 49.30106]
                ]
            },
            properties: {
                name: "Amazon YVR to Stanley Park",
                description: "An evening walk from Amazon office to Stanley Park."
            }
        }
    ]
};
```

------

## 開發人員秘訣
<a name="developer-tips"></a>

**擬合邊界：**您可以透過計算線條座標的邊界，將線條擬合至地圖邊界：

```
const coordinates = routeGeoJSON.features[0].geometry.coordinates;
const bounds = coordinates.reduce((bounds, coord) => bounds.extend(coord), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, { padding: 20 });
```

# 如何在地圖上新增多邊形
<a name="how-to-add-polygon-on-map"></a>

Amazon Location Service 可讓您將多邊形新增至地圖。您可以根據您的業務需求來設計多邊形樣式，包括新增填滿和邊界樣式。

## 新增多邊形
<a name="add-polygon"></a>

在此範例中，您會將多邊形新增至地圖，並以填充顏色和邊界來設計樣式。

### 多邊形程式碼範例
<a name="web-code-example-polygon"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Overlay a Polygon on a Map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.13203602550998, 49.28726257639254],
                zoom: 16
            });

            map.on('load', () => {
                map.addSource('barclayHeritageSquare', {
                    type: 'geojson',
                    data: barclayHeritageSquare
                });

                map.addLayer({
                    id: 'barclayHeritageSquare-fill',
                    type: 'fill',
                    source: 'barclayHeritageSquare',
                    layout: {},
                    paint: {
                        'fill-color': '#008296',
                        'fill-opacity': 0.25
                    }
                });

                map.addLayer({
                    id: 'barclayHeritageSquare-outline',
                    type: 'line',
                    source: 'barclayHeritageSquare',
                    layout: {},
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const barclayHeritageSquare = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "park_id": 200,
                "park_name": "Barclay Heritage Square",
                "area_ha": 0.63255076039675,
                "park_url": "http://covapp.vancouver.ca/parkfinder/parkdetail.aspx?inparkid=200"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [-123.1320948511985, 49.287379401361406],
                        [-123.13179672786798, 49.2871908081159],
                        [-123.13148154587924, 49.28739992437733],
                        [-123.1313830551372, 49.28733617069321],
                        [-123.13118648745055, 49.287208851500054],
                        [-123.13128257706838, 49.28714532642171],
                        [-123.13147941881572, 49.28727228533418],
                        ...
                        [-123.13177619357138, 49.28759081706052],
                        [-123.1320948511985, 49.287379401361406]
                    ]
                ]
            }
        }
    ]
};
```

------

# 如何將彈出式視窗新增至地圖
<a name="how-to-add-popup-to-map"></a>

Amazon Location Service 可讓您將快顯視窗新增至地圖。您可以新增簡單的快顯視窗、在標記上按一下觸發的快顯視窗、暫留觸發的快顯視窗，以及多個標記的快顯視窗。

## 新增您的第一個快顯視窗
<a name="add-first-popup"></a>

在此範例中，您將新增第一個快顯視窗。

### 第一個彈出式程式碼範例
<a name="first-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-96, 37.8],
                zoom: 2
            });

            const popup = new maplibregl.Popup({closeOnClick: false})
                .setLngLat([-96, 37.8])
                .setHTML('<h1>Hello USA!</h1>')
                .addTo(map);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 按一下標記時顯示快顯視窗
<a name="show-popup-on-click"></a>

在此範例中，您會將彈出式視窗連接至標記，並在按一下時顯示。

### 標記點選範例的彈出視窗
<a name="click-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const centralpark_nyc = [-73.966,40.781];
            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: centralpark_nyc,
                zoom: 13
            });

            const popup = new maplibregl.Popup({offset: 25}).setText(
                'Central Park, NY is one of the most filmed locations in the world, appearing in over 240 feature films since 1908.'
            );

            new maplibregl.Marker()
                .setLngLat(centralpark_nyc)
                .setPopup(popup)
                .addTo(map);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 將游標暫留在標記上時顯示快顯視窗
<a name="show-popup-on-hover"></a>

在此範例中，您會將彈出式視窗連接至標記，並在游標暫留時顯示。

### 標記暫留的快顯視窗範例
<a name="hover-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const centralpark_nyc = [-73.966,40.781];
            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: centralpark_nyc,
                zoom: 13
            });

            const marker = new maplibregl.Marker().setLngLat([-73.968285, 40.785091]).addTo(map);
            const popup = new maplibregl.Popup({ offset: 25 })
                .setHTML("<h3>Central Park</h3><p>Welcome to Central Park, NYC!</p>");

            const markerElement = marker.getElement();
            markerElement.addEventListener('mouseenter', () => {
                popup.setLngLat([-73.968285, 40.785091]).addTo(map);
            });
            markerElement.addEventListener('mouseleave', () => {
                popup.remove();
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 按一下多個標記時顯示快顯視窗
<a name="popup-on-multiple-markers"></a>

在此範例中，您會將彈出式視窗連接至多個標記，並在按一下時顯示。

### 按一下多個標記時的快顯視窗範例
<a name="popup-on-multiple-markers-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "Your API Key";
            const mapStyle = "Monochrome";  
            const awsRegion = "eu-central-1";
            const colorScheme ="Light";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', 
                style: styleUrl, 
                center: [-123.126979, 49.2841563],
                zoom: 15,
                minZoom: 13,
                maxZoom: 17
            });

            const locations = [
                { id: 1, lat: 49.281108, lng: -123.117049, name: "Amazon - YVR11 office" },
                { id: 2, lat: 49.285580, lng: -123.115806, name: "Amazon - YVR20 office" },
                { id: 3, lat: 49.281661, lng: -123.114174, name: "Amazon - YVR14 office" },
                { id: 4, lat: 49.280663, lng: -123.114379, name: "Amazon - YVR26 office" },
                { id: 5, lat: 49.285343, lng: -123.129119, name: "Amazon - YVR25 office" }
            ];

            const geojson = {
                type: "FeatureCollection",
                features: locations.map(location => ({
                    type: "Feature",
                    properties: { id: location.id, name: location.name },
                    geometry: {
                        type: "Point",
                        coordinates: [location.lng, location.lat]
                    }
                }))
            };
            
            map.on('load', async () => {
                try {
                    const image = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/1200px-Amazon_Web_Services_Logo.svg.png');
                    map.addImage('aws', image);

                    map.addSource('places', { type: 'geojson', data: geojson });

                    map.addLayer({
                        'id': 'places',
                        'type': 'symbol',
                        'source': 'places',
                        'layout': {
                            'icon-image': 'aws',
                            'icon-size': 0.025,
                            'icon-allow-overlap': true
                        }
                    });

                    const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false });

                    map.on('click', 'places', (e) => {
                        map.getCanvas().style.cursor = 'pointer';
                        const coordinates = e.features[0].geometry.coordinates.slice();
                        const name = e.features[0].properties.name;
                        popup.setLngLat(coordinates).setHTML(name).addTo(map);
                    });

                    map.on('mouseleave', 'places', () => {
                        map.getCanvas().style.cursor = '';
                        popup.remove();
                    });
                } catch (error) {
                    console.error('Error loading image:', error);
                }
            });

            async function loadImage(url) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = 'anonymous';
                    img.onload = () => resolve(img);
                    img.onerror = (error) => reject(error);
                    img.src = url;
                });
            }
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 將游標暫留在多個標記上時顯示快顯視窗
<a name="popup-on-hover-multiple-markers"></a>

在此範例中，您會將彈出式視窗連接至多個標記，並在游標暫留時顯示。

### 將游標暫留在多個標記範例上的快顯視窗
<a name="popup-on-hover-multiple-markers-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container --> 
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "You API Key";
            const mapStyle = "Monochrome";  // eg. Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // eg. us-east-2, us-east-1, etc.
            const colorScheme ="Light"; // eg Dark, Light (default)
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            // Initialize the map
            const map = new maplibregl.Map({
                container: 'map', // Container id
                style: styleUrl, // Style URL
                center: [-123.126979, 49.2841563], // Starting position [lng, lat]
                zoom: 15, // Starting zoom
                minZoom: 13, // Minimum zoom level
                maxZoom: 17 // Maximum zoom level
            });

            const locations = [
                { id: 1, lat: 49.281108, lng: -123.117049, name: "Amazon - YVR11 office" },
                { id: 2, lat: 49.285580, lng: -123.115806, name: "Amazon - YVR20 office" },
                { id: 3, lat: 49.281661, lng: -123.114174, name: "Amazon - YVR14 office" },
                { id: 4, lat: 49.280663, lng: -123.114379, name: "Amazon - YVR26 office" },
                { id: 5, lat: 49.285343, lng: -123.129119, name: "Amazon - YVR25 office" }
            ];

            // Convert locations to GeoJSON
            const geojson = {
                type: "FeatureCollection",
                features: locations.map(location => ({
                    type: "Feature",
                    properties: { 
                        id: location.id,
                        name: location.name // Use the name property for popup
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [location.lng, location.lat] // GeoJSON uses [lng, lat]
                    }
                }))
            };
            
            // Add the GeoJSON source and layers when the map loads
            map.on('load', async () => {
                try {
                    // Load the PNG image for the marker
                    const image = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/1200px-Amazon_Web_Services_Logo.svg.png'); // Ensure this URL points to a valid PNG
                    map.addImage('aws', image);

                    // Add a GeoJSON source
                    map.addSource('places', {
                        type: 'geojson',
                        data: geojson
                    });

                    // Add a layer showing the places with custom icons
                    map.addLayer({
                        'id': 'places',
                        'type': 'symbol',
                        'source': 'places',
                        'layout': {
                            'icon-image': 'aws',
                            'icon-size': 0.025, // Adjust as needed
                            'icon-allow-overlap': true // Allow icons to overlap
                        }
                    });

                    // Create a popup
                    const popup = new maplibregl.Popup({
                        closeButton: false,
                        closeOnClick: false
                    });

                    // Event handlers for mouse enter and leave
                    map.on('mouseenter', 'places', (e) => {
                        map.getCanvas().style.cursor = 'pointer';
                        const coordinates = e.features[0].geometry.coordinates.slice();
                        const name = e.features[0].properties.name;

                        // Set popup content and position
                        popup.setLngLat(coordinates).setHTML(name).addTo(map);
                    });

                    map.on('mouseleave', 'places', () => {
                        map.getCanvas().style.cursor = '';
                        popup.remove();
                    });
                } catch (error) {
                    console.error('Error loading image:', error);
                }
            });

            // Helper function to load the image
            async function loadImage(url) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = 'anonymous'; // Enable CORS
                    img.onload = () => resolve(img);
                    img.onerror = (error) => reject(error);
                    img.src = url;
                });
            }
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; } 
html, body, #map { height: 100%; }
```

------

# 如何設定地圖的偏好語言
<a name="how-to-set-preferred-language-map"></a>

Amazon Location Service 可讓您更新特定語言的樣式描述項，以在用戶端設定偏好的語言。您可以設定偏好的語言，並以內嵌的語言顯示內容。否則，它會回復為另一種語言。

**注意**  
如需詳細資訊，請參閱[當地語系化和國際化](maps-localization-internationalization.md)。

## 將慣用語言設定為日文，並顯示日本的地圖
<a name="set-preferred-language-japanese"></a>

在此範例中，您將設定更新樣式，以顯示日文 (ja) 的地圖標籤。

### 將慣用語言設定為日文範例
<a name="set-preferred-language-japanese-example"></a>

------
#### [ index.html ]

```
<html>
<head>
    <link href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="main.js"></script>
</head>
<body>
    <div id="map" />
    <script>
        const apiKey = "Add Your Api Key";
        const mapStyle = "Standard";
        const awsRegion = "eu-central-1";
        const initialLocation = [139.76694, 35.68085]; //Japan   
        
        async function initializeMap() {
            // get updated style object for preferred language. 
            const styleObject = await getStyleWithPreferredLanguage("ja");
            // Initialize the MapLibre map with the fetched style object
            const map = new maplibregl.Map({
                container: 'map',
                style: styleObject,
                center: initialLocation,
                zoom: 15,
                hash:true,
            });
            map.addControl(new maplibregl.NavigationControl(), "top-left");
        
            return map; 
        }
  
        initializeMap();
    </script>
</body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; }
#map { height: 100vh; }
```

------
#### [ main.js ]

```
async function getStyleWithPreferredLanguage(preferredLanguage) {
    const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

    return fetch(styleUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(styleObject => {
            if (preferredLanguage !== "en") {
                styleObject = setPreferredLanguage(styleObject, preferredLanguage);
            }

            return styleObject;
        })
        .catch(error => {
            console.error('Error fetching style:', error);
        });
}

const setPreferredLanguage = (style, language) => {
    let nextStyle = { ...style };

    nextStyle.layers = nextStyle.layers.map(l => {
        if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
        return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
    });

    return nextStyle;
};

const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
    const nextLayer = {
        ...layer,
        layout: {
            ...layer.layout,
            'text-field': recurseExpression(
                layer.layout['text-field'],
                prevPropertyRegex,
                nextProperty
            )
        }
    };
    return nextLayer;
};

const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
    if (!Array.isArray(exp)) return exp;
    if (exp[0] !== 'coalesce') return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    const first = exp[1];
    const second = exp[2];

    let isMatch =
    Array.isArray(first) &&
    first[0] === 'get' &&
    !!first[1].match(prevPropertyRegex)?.[0];

    isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
    isMatch = isMatch && !exp?.[4];

    if (!isMatch) return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    return [
        'coalesce',
        ['get', nextProperty],
        ['get', 'name:en'],
        ['get', 'name']
    ];
};
```

------

## 根據最終使用者的瀏覽器語言設定偏好的語言
<a name="set-preferred-language-browser"></a>

在此範例中，您將設定更新樣式，以顯示使用者裝置語言的映射標籤。

### 根據瀏覽器語言範例設定偏好的語言
<a name="set-preferred-language-browser-code"></a>

------
#### [ index.html ]

```
<html>
<head>
    <link href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="main.js"></script>
</head>
<body>
    <div id="map" />
    <script>
        const apiKey = "Add Your Api Key";
        const mapStyle = "Standard";
        const awsRegion = "eu-central-1";
        const initialLocation = [139.76694, 35.68085]; //Japan     
        const userLanguage = navigator.language || navigator.userLanguage;
        const languageCode = userLanguage.split('-')[0];

        async function initializeMap() {
             const styleObject = await getStyleWithPreferredLanguage(languageCode);
             const map = new maplibregl.Map({
                 container: 'map',
                 style: styleObject,
                 center: initialLocation,
                 zoom: 15,
                 hash:true,
             });
             map.addControl(new maplibregl.NavigationControl(), "top-left");
             return map; 
        }

        initializeMap();
    </script>
</body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; }
#map { height: 100vh; }
```

------
#### [ main.js ]

```
async function getStyleWithPreferredLanguage(preferredLanguage) {
    const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

    return fetch(styleUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(styleObject => {
            if (preferredLanguage !== "en") {
                styleObject = setPreferredLanguage(styleObject, preferredLanguage);
            }

            return styleObject;
        })
        .catch(error => {
            console.error('Error fetching style:', error);
        });
}

const setPreferredLanguage = (style, language) => {
    let nextStyle = { ...style };

    nextStyle.layers = nextStyle.layers.map(l => {
        if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
        return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
    });

    return nextStyle;
};

const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
    const nextLayer = {
        ...layer,
        layout: {
            ...layer.layout,
            'text-field': recurseExpression(
                layer.layout['text-field'],
                prevPropertyRegex,
                nextProperty
            )
        }
    };
    return nextLayer;
};

const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
    if (!Array.isArray(exp)) return exp;
    if (exp[0] !== 'coalesce') return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    const first = exp[1];
    const second = exp[2];

    let isMatch =
    Array.isArray(first) &&
    first[0] === 'get' &&
    !!first[1].match(prevPropertyRegex)?.[0];

    isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
    isMatch = isMatch && !exp?.[4];

    if (!isMatch) return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    return [
        'coalesce',
        ['get', nextProperty],
        ['get', 'name:en'],
        ['get', 'name']
    ];
};
```

------

# 如何設定地圖的政治觀點
<a name="how-to-set-political-view-map"></a>

Amazon Location Service 可讓您設定政治觀點，以確保您的應用程式符合當地法律。您可以設定政治觀點，並比較不同政治觀點的地圖。

**注意**  
如需詳細資訊，請參閱[當地語系化和國際化](maps-localization-internationalization.md)。

## 設定政治觀點並與國際觀點比較
<a name="set-political-view"></a>

在此範例中，您將從兩種不同的政治觀點建立和比較地圖：國際觀點和土耳其在賽普勒斯的檢視。

### 政治檢視比較範例
<a name="set-political-view-compare-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div class="maps">
        <div id="internationalView"></div>
        <div id="turkeyView"></div>
        </div>
        <script>

            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";

            // International perspective without political-view query parameter
            const internationalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            // Turkey perspective with political-view query parameter
            const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`;

            const internationalViewMap = new maplibregl.Map({
                container: 'internationalView', // container id
                style: internationalViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139], // starting position [lng, lat]
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            const turkeyViewMap = new maplibregl.Map({
                container: 'turkeyView', // container id
                style: turkeyViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139],
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            // Sync map zoom and center
            syncMaps(internationalViewMap, turkeyViewMap);

            // Informational popup for international view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>')
                .addTo(internationalViewMap);

            // Informational popup for Turkey's view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>')
                .addTo(turkeyViewMap);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body { height: 100%; }
#internationalView, #turkeyView { height: 100%; width: 100%; }
.maps {
    display: flex;
    width: 100%;
    height: 100%;
}
```

------

# 如何在地圖上篩選 POI
<a name="how-to-filter-poi-map"></a>

Amazon Location Service 可讓您選取與使用案例相關的 POI point-of-interest類別。進一步了解標準地圖樣式 [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) 

## 篩選 POI
<a name="test-collapse-me"></a>

在此範例中，您會顯示互動式地圖，允許使用者篩選 POI 類別。

------
#### [ Index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>POI demo</title>
        <meta property="og:description" content="" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" />
        <link rel='stylesheet' href='style.css' />
        <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>

    </head>
    <body>

        <div id="map"></div>
        <ul id="buttons"></ul>
        <script>
            // -------------------------------------------------------------------------------------------
            // Function to set layer state
            // -------------------------------------------------------------------------------------------

            const initialLayerState = {
                Buildings: {
                    layers: ['poi_900_areas_buildings'],
                    visibility: 'visible'
                },
                'Business & Services': {
                    layers: ['poi_700_business_services'],
                    visibility: 'visible'
                },
                Shopping: { layers: ['poi_600_shopping'], visibility: 'visible' },
                'Leisure & Outdoors': {
                    layers: ['poi_550_leisure_outdoor'],
                    visibility: 'visible'
                },
                Facilities: { layers: ['poi_800_facilities'], visibility: 'visible' },
                Transit: { layers: ['poi_400_transit'], visibility: 'visible' },
                'Sights & Museums': {
                    layers: ['poi_300_sights_museums'],
                    visibility: 'visible'
                },
                'Food & Drink': {
                    layers: ['poi_100_food_drink'],
                    visibility: 'visible'
                },
                'Going Out & Entertainment': {
                    layers: ['poi_200_going_out_entertainment'],
                    visibility: 'visible'
                },
                Accommodations: {
                    layers: ['poi_500_accommodations'],
                    visibility: 'visible'
                },
                Parks: { layers: ['poi_landuse_park'], visibility: 'visible' },
                'Public Complexes': {
                    layers: ['poi_landuse_public_complex'],
                    visibility: 'visible'
                }
            };

            // -------------------------------------------------------------------------------------------
            // Setup auth and state
            // -------------------------------------------------------------------------------------------

            let state = { ...initialLayerState };

                const API_KEY = "<api key>"; // check how to create api key for Amazon Location
                const AWS_REGION = "eu-central-1"; // Replace with your AWS region

                const mapStyle = "Standard";
                const colorScheme = "Light";


            // Style URL
            const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;


            // Render the map with the stylesheet
            map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-73.966148, 40.781803],
                zoom: 17
            });

            const buttonContainer = document.getElementById('buttons');

            for (const category of Object.keys(state)) {
                const newButton = document.createElement('li');
                newButton.classList.add('button');
                newButton.classList.add('active');
                newButton.id = category;

                // Each config has a label
                newButton.textContent = category;

                // On click, we want to switch the value between 'on' and 'off'
                // We could check the config for available options in more complex cases
                newButton.onclick = () => {
                    onClickCategory(category);
                };

                // Append the button to our button container
                buttonContainer.appendChild(newButton);
            }

            // -------------------------------------------------------------------------------------------
            // LAYER VISIBILITY FUNCTION
            // -------------------------------------------------------------------------------------------

            // On click, get the stylesheet, update the language, and set the style
            const onClickCategory = category => {
                const categoryState = state[category];
                const { visibility, layers } = categoryState;

                let nextState;

                // For active button styling
                const activeButton = document.getElementById(category);

                if (visibility === 'visible') {
                    nextState = 'none';
                    activeButton.classList.remove('active');
                } else {
                    nextState = 'visible';
                    activeButton.classList.add('active');
                }

                layers.forEach(id =>
                    map.setLayoutProperty(id, 'visibility', nextState)
                );

                state[category].visibility = nextState;
            };
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}
html,
body,
#map {
    height: 100%;
}


#buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    min-width: 100px;
    max-height: calc(100% - 2rem);
    overflow: auto;
    padding: 1rem;
    background-color: white;
    margin: 0;
}

.button {
    display: inline-block;
    cursor: pointer;
    padding: 8px;
    border-radius: 3px;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #8a8a8a;
    font-family: sans-serif;
    font-weight: bold;
}

.button:first-child {
    margin-top: 0;
}

.active {
    background: #ee8a65;
}
```

------

# 如何建立地形貼圖
<a name="how-to-create-topographic-maps"></a>

Amazon Location Service 可讓您使用地形和輪廓密度功能建立地形貼圖，以視覺化方式呈現海拔變化和地理特性。

## 顯示希爾夏德
<a name="show-hillshade"></a>

地形功能可讓您視覺化 Hillshade、海拔變更和相關的地理功能。

### Hillshade 範例
<a name="hillshade-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 使用等高線密度線顯示高度
<a name="show-contour-density"></a>

Amazon Location Service 可讓您將輪廓密度功能新增至地圖。這可提供地理陡峭度和高度變更的視覺化。

### 輪廓密度範例
<a name="contour-density-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&key=${apiKey}`,
                center: [-119.3047, 37.7887], 
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 同時顯示希爾夏德線和輪廓密度線
<a name="show-hillshade-contour"></a>

使用 Amazon Location Service，您可以在地圖上結合希爾夏德和輪廓密度功能，以實現全面的地形視覺化。這可提供增強的深度感知，並完全了解地形變化和地形特性。

### 具有輪廓密度的 Hillshade 範例
<a name="hillshade-contour-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hillshade and Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&terrain=Hillshade&key=${apiKey}`,
                center: [-119.3047, 37.7887],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地圖上顯示即時流量
<a name="how-to-set-real-time-traffic-map"></a>

 使用 Amazon Location Service，您可以將流量功能新增至地圖。這可提供即時流量資料，以顯示目前的流量條件，例如目前的道路擁塞、建構和事件，協助您進行路由選擇。

## 建立具有即時流量的映射
<a name="how-to-set-real-time-traffic"></a>

此範例示範如何使用即時流量資料建立映射。

### 即時流量範例
<a name="how-to-set-real-time-traffic-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Traffic Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?traffic=All&key=${apiKey}`,
                center: [-74.0060 ,40.7128], // New York City coordinates for traffic visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何建立物流地圖
<a name="how-to-create-logistic-map"></a>

TravelModes 功能可讓您使用 Amazon Location Service 建置物流地圖。TravelModes 會顯示具有相關道路限制的 Truck 導航相關路由資訊。使用 [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) 來顯示公有運輸詳細資訊。

## 使用 Truck TravelMode 建立地圖
<a name="how-to-create-truck-map"></a>

此範例示範如何使用 建立邏輯路由`Truck``TravelMode`的映射。

### 卡車範例
<a name="how-to-create-truck-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Truck Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Truck&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何在地圖上顯示傳輸詳細資訊
<a name="how-to-show-transit-details-map"></a>

Amazon Location Service 可讓您將傳輸功能新增至映射。`Transit` `TravelMode` 會顯示公有傳輸的路由資訊，例如顏色編碼的訓練線。另請查看如何為其他選項設定[物流 TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html)。

## 建立具有傳輸詳細資訊的映射
<a name="how-to-show-transit-map"></a>

此範例說明如何使用 Transit TravelMode 建立具有傳輸詳細資訊的地圖以供大眾運輸。

### 傳輸範例
<a name="how-to-show-transit-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Transit Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Transit&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何建立 3D 映射
<a name="how-to-create-a-3d-map"></a>

Amazon Location Service 可讓您新增要映射的三維功能，例如`Terrain3D`將海拔資料顯示為三維表面，或`Buildings3D`顯示具有高度和體積的都會結構。

## 建立具有三維地形詳細資訊的映射
<a name="how-to-show-3d-terrain-map"></a>

此範例說明如何使用 `Terrain3D` 參數建立映射。

### Terrain3D 範例
<a name="how-to-show-3d-terrain-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Terrain</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Terrain3D&key=${apiKey}`,
                center: [7.6583, 45.9763],
                zoom: 12,
                pitch: 60, // Tilt angle (0-85 degrees)
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

## 建立具有三維建築物詳細資訊的地圖
<a name="how-to-show-3d-buildings-map"></a>

此範例說明如何使用 `Buildings3D` 參數建立映射。

### Buildings3D 範例
<a name="how-to-show-3d-buildings-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Buildings</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style:
                `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?buildings=Buildings3D&key=${apiKey}`,
                center: [7.6583, 45.9763],
                zoom: 12,
                pitch: 60, // Tilt angle (0-85 degrees)
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

## 啟用/停用全域檢視
<a name="how-to-enable-disable-globe-view"></a>

此範例說明如何啟用或停用全域檢視投影。根據預設，全域檢視已啟用。

### Globe 檢視範例
<a name="how-to-enable-disable-globe-view-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Globe View</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style:
                `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
                center: [-74.5, 40],
                zoom: 2,
                validateStyle: false, // Disable style validation for faster map load
            });

            map.on('style.load', () => {
                // Globe view is enabled by default
                // To disable globe view, uncomment the next line:
                // map.setProjection({});
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何使用靜態地圖
<a name="static-maps-how-to"></a>

這些教學主題提供step-by-step指引，以利用 Amazon Location Service 的映射功能，使用浮水印和視覺化元素自訂靜態地圖。每個指南都會逐步引導您完成關鍵任務，例如調整地圖維度、選擇縮放或半徑，以及新增各種地理空間元素，例如標記、多邊形、線條和接近圓圈。這些指南同時使用精簡型和 GeoJSON 格式，以確保樣式和組態的靈活性。

無論您是針對面向客戶的應用程式最佳化地圖，還是執行地理空間分析，這些主題都會提供明確的指示，讓您量身打造符合特定需求的靜態地圖。遵循詳細範例，您將了解如何增強地圖呈現，並有效管理各種業務需求的地理資料。

**Topics**
+ [如何取得特定位置的靜態映射](get-static-map-specific-position.md)
+ [如何取得特定維度的靜態映射](get-static-map-specific-dimension.md)
+ [如何決定靜態地圖的半徑和縮放](choose-radius-vs-zoom.md)
+ [如何為靜態映射新增擴展](add-scale-static-map.md)
+ [如何將標記新增至靜態映射](add-marker-static-map.md)
+ [如何將線條新增至靜態地圖](how-to-add-line-static.md)
+ [如何將路由新增至靜態映射](how-to-add-route.md)
+ [如何將多邊形新增至靜態地圖](how-to-add-polygon-static.md)
+ [如何設定靜態地圖的語言](set-language-static-map.md)
+ [如何將鄰近圓圈新增至靜態地圖](how-to-add-proximity-circle.md)

# 如何取得特定位置的靜態映射
<a name="get-static-map-specific-position"></a>

在本主題中，您將了解如何根據特定參數從 Amazon Location Service 擷取靜態地圖。您將了解如何為中心位置、週框方塊和一組週框位置產生靜態映射。提供的範例可協助您自訂地圖的寬度、高度和樣式。

**注意**  
產生靜態映射`map@2x`時，您必須傳遞 `map`或 。

## 取得中心位置的地圖影像
<a name="get-map-center-position"></a>

在此範例中，您將建立寬度為 `1024`且高度為 的地圖影像`1024`，中心座標設定為 `-123.1143,49.2763`，其中 `longitude=-123.1143`和 `latitude=49.2763`，縮放層級為 `15`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&center=-123.1156126,49.2767046&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban layout, harbor, and large stadium visible.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-center.png)


------

## 取得週框方塊的地圖影像
<a name="get-map-bounding-box"></a>

在此範例中，您將設定區域的週框方塊，以產生東南亞的地圖影像。

`bbox` 格式為 `{southwest_longitude},{southwest_latitude},{northeast_longitude},{northeast_latitude}`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounding-box=90.00,-21.94,146.25,31.95&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Southeast Asia, showing mainland, islands, and surrounding waters.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-bounding-box.png)


------

## 取得邊界位置的地圖影像
<a name="get-map-bounded-positions"></a>

在此範例中，您將產生地圖，涵蓋巴黎的數個必看位置，每個位置都由其座標 （經度、緯度） 指定。邊界位置包括：Eiffel Tower、Louvre 美術館、Notre-Dame Cathedral、Champs-@@lysées、Arc de Triomphe、Sacvalu-Cœur Basilica、Luxembourg Gardens、Musée d'Orsay、Place de la Concorde 和 Palais Garnier。

邊界位置的格式為 `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=2.2945,48.8584,2.3376,48.8606,2.3500,48.8529,2.3076,48.8698,2.2950,48.8738,2.3431,48.8867,2.3372,48.8462,2.3266,48.8600,2.3212,48.8656,2.3317,48.8719&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Paris showing dense urban layout, Seine River, and iconic landmarks.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-bounding-position.png)


------

# 如何取得特定維度的靜態映射
<a name="get-static-map-specific-dimension"></a>

在本主題中，您將了解如何使用 Amazon Location Service 設定靜態地圖的維度 （高度和寬度）。自訂地圖影像的維度可讓您平衡效能、視覺品質和可用性。`width` 和 的最大值`height`為 1400 像素，而最小值為 64 像素。結果大小上限為 6 MB。

此外，您可以使用 `bbox`和 `bounds` 參數以及 `padding` ，以確保邊緣附近的重要地圖功能完全可見，不會中斷。

## 取得具有特定高度和寬度的地圖影像
<a name="get-map-specific-dimension"></a>

在此範例中，您將建立芬蘭赫爾辛基的低解析度和中解析度地圖影像。

------
#### [ Request URL for low-resolution thumbnail ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=200&height=200&zoom=11.5&center=24.9460,60.1690&key=API_KEY
```

------
#### [ Response (Thumbnail 200x200) ]

![\[Aerial view of a coastal city with intricate waterways, islands, and urban development.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-specific-dimension-low.png)


------
#### [ Request URL for mid-resolution image ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=13&center=24.9460,60.1690&key=API_KEY
```

------
#### [ Response image (700x700) ]

![\[Aerial view of a coastal city with dense urban development, harbors, and surrounding waters.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-specific-dimension-mid.png)


------

## 取得貼圖影像，並在兩側加上填補
<a name="get-map-with-padding"></a>

在此範例中，您將使用芬蘭赫爾辛基的幾個必看位置，以及其座標 （經度、緯度） 來產生地圖，無論是否有填補。

------
#### [ Request URL with padding ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY
```

------
#### [ Response image (with padding) ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and surrounding islands.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-specific-dimension-padding.png)


------
#### [ Request URL without padding ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY
```

------
#### [ Response image (without padding) ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and small islands.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-specific-dimension-no-padding.png)


------

# 如何決定靜態地圖的半徑和縮放
<a name="choose-radius-vs-zoom"></a>

在本主題中，您將了解如何在透過 Amazon Location Service 產生靜態地圖`zoom`時，選擇使用 `radius`或 。`radius` 參數可更精確地控制涵蓋範圍，因此非常適合您了解確切涵蓋範圍的客戶面向應用程式。當您想要調整顯示的詳細資訊層級時， `zoom` 參數更適合用於地理空間分析。

## 使用半徑
<a name="with-radius"></a>

在此範例中，您將使用具有中心位置的 `radius` 參數建立斯里蘭卡的地圖影像。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&center=80.60596,7.76671&radius=235000&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-radius.png)


------

## 使用縮放
<a name="with-zoom"></a>

在此範例中，您將使用具有中心位置的 `zoom` 參數建立斯里蘭卡的地圖影像。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=8&center=80.60596,7.76671&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-zoom.png)


------

# 如何為靜態映射新增擴展
<a name="add-scale-static-map"></a>

在本主題中，您將了解如何在 Amazon Location Service 產生的靜態地圖的右下角顯示比例。縮放可以顯示單一單位，例如 `Miles`或 `Kilometers`，或兩個單位，例如 `KilometersMiles`或 `MilesKilometers`，其中一個單位顯示在頂端，另一個單位顯示在底部。

## 使用單一單位新增擴展
<a name="add-scale-single-unit"></a>

在此範例中，您會在右`Kilometers`下角顯示芬蘭赫爾辛基的地圖，並將比例設為 。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=13.5&center=24.9189564,60.1645772&scale-unit=Kilometers&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban areas, waterways, and islands.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-scale-single.png)


------

## 使用兩個單位新增擴展
<a name="add-scale-both-units"></a>

在此範例中，您將顯示芬蘭赫爾辛基的地圖，兩者都顯示，`Kilometers`並在右下角的刻度上`Miles`顯示，一個單位顯示在另一個單位上方。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=14&center=24.9189564,60.1645772&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and islands surrounded by water.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-scale-both.png)


------

# 如何將標記新增至靜態映射
<a name="add-marker-static-map"></a>

在本主題中，您將了解如何將標記新增至使用 Amazon Location Service 產生的靜態映射。您可以自訂標記的圖示、標籤、大小、顏色和其他樣式選項。這可讓您使用符合地圖用途的視覺提示來反白顯示特定位置。

## 標記樣式
<a name="marker-styling"></a>


| 名稱 | Type | 預設 | 描述 | 
| --- | --- | --- | --- | 
| `style` | 字串 | `marker` | 點幾何的樣式。若要建立標記，請將 值設定為 `marker`，或不要在 GeoJSON `style` 的屬性物件中包含 屬性。 | 
| `icon` | 字串 | `pin` | 標記圖示類型。可用的值包括： `cp`（鄰近圓）`diamond`、、`pin`、`poi`、`square``triangle`、、`bubble`。 | 
| `label` | 字串 | `<empty>` | 要在座標顯示的文字。若要設定自動標籤，請使用下列值： `$alpha`（拉丁字母） 或 `$num`（阿拉伯數字）。 | 
| `color` | 顏色 | 風格相依 | 圖示顏色。 | 
| `outline-color` | 顏色 | 風格相依 | 圖示輪廓顏色。 | 
| `text-color` | 顏色 | 風格相依 | 標籤文字顏色。 | 
| `text-outline-color` | 顏色 | 風格相依 | 文字大綱顏色。 | 
| `outline-width` | Integer | `0` （關閉） | 文字外框寬度。 | 
| `size` | 字串 | `medium` | 標籤和圖示大小。可用的值：`small`、`medium`、`large`。 | 

## 將標記新增至映射映像
<a name="add-marker-single"></a>

在此範例中，您將在 BC Place， Vancouver 的地圖影像上放置具有標籤的標記。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -123.11210,
          49.2767875
        ]
        },
      "properties": {
          "color":"#EE4B2B",
          "size":"large",
          "label":"BC Place, Vancouver",
          "text-color":"#0000FF"
       }
    }
  ]
}
```

`Compact`:

```
point: -123.11210,49.27678;
label=BC Place, Vancouver;
size=large;
text-color=#0000FF;
color=#EE4B2B
```

------
#### [ Request URL ]

使用 GeoJSON 浮水印

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-add-marker.png)


------

## 將多個標記新增至映射影像
<a name="add-multiple-markers"></a>

在此範例中，您將使用其座標 （經度、緯度） 為芬蘭赫爾辛基的必看位置新增標記。您也可以套用填補，以確保映射正確容納所有標記。

**注意**  
可用的標記圖示類型包括：`cp`適用於鄰近圓圈 `diamond, pin, poi, square, triangle, bubble`。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [24.9526, 60.1692],
          [24.9270, 60.1725],
          [24.9226, 60.1826],
          [24.9509, 60.1675],
          [24.9566, 60.1685],
          [24.9457, 60.1674],
          [24.9397, 60.1719],
          [24.9414, 60.1715],
          [24.9387, 60.1720]
        ]
      },
      "properties": {
        "icon":"diamond",
        "label":"$num",
        "size":"large",
        "text-color":"%23972E2B",
        "text-outline-color":"%23FFF",
        "text-outline-width":2
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-add-multi-markers.png)


------

## 變更地圖影像中標記的顏色
<a name="change-marker-color"></a>

在此範例中，您將使用不同顏色的氣泡標記來代表全球的城市。您可以自訂標記的顏色、標籤和其他屬性，以符合映射的內容。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [85.1376, 25.5941]
      },
      "properties": {
        "label": "Patna",
        "icon": "bubble",
        "color": "#FF5722",
        "outline-color": "#D74D3D",
        "text-color": "#FFFFFF"
      }
    },
    .....redacted.....
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [2.3522, 48.8566]
      },
      "properties": {
        "label": "Paris, France",
        "icon": "bubble",
        "color": "#FF9800",
        "outline-color": "#D76B0B",
        "text-color": "#FFFFFF"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-change-marker-color.png)


------

# 如何將線條新增至靜態地圖
<a name="how-to-add-line-static"></a>

 在本主題中，您將了解如何使用 Amazon Location Service 將線條新增至靜態地圖。我們將介紹支援的樣式選項、如何使用 GeoJSON 定義線條，以及如何套用自訂樣式，例如顏色、寬度和大綱。我們也將探索如何針對線條寬度等屬性使用不同的測量單位。

## 支援的樣式
<a name="supported-styling"></a>


| 名稱 | Type | 預設 | 描述 | 
| --- | --- | --- | --- | 
| `color` | 顏色 | 風格相依 | 線條顏色。 | 
| `width` | 整數/字串 | 2 | 線條寬度。如需詳細資訊，請參閱[如何將線條新增至靜態地圖](#how-to-add-line-static)。 | 
| `outline-color`  | 顏色 | 風格相依 | 線條輪廓顏色。 | 
|  `outline-width`  | 整數/字串 | 0 （關閉） | 外框的寬度。如需詳細資訊，請參閱[如何將線條新增至靜態地圖](#how-to-add-line-static)。 | 

## 支援的單位
<a name="supported-unit"></a>


| 單位 | 描述 | 
| --- | --- | 
| 整數，例如， `5` | Pixels | 
| 沒有單位的字串，例如 `"5"` | Pixels | 
| `"px"` | Pixels | 
| `"m"` | 計量器 | 
|  `"km"`  | 公里 | 
| `"mi"` | 英里 | 
| `"ft"` | 足部 | 
| `"yd"` | Yards | 
| `"%"` | 特定屬性的預設值百分比，以像素為單位。例如，如果 的預設值`width`為`2`像素，則 `200%` 為`4`像素。 `%` 是敏感字元，必須在請求 URL 中編碼為 `%25`。 | 

## 新增行
<a name="add-a-line"></a>

 在此範例中，您將從 Vancouver 中的位置新增一條線到史坦利公園。系統會使用 GeoJSON 格式搭配定義的座標來建立該行。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "name": "To Stanley Park",
        "description": "An evening walk to Stanley Park."
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22name%22%3A%22To%20Stanley%20Park%22,%22description%22%3A%22An%20evening%20walk%20to%20Stanley%20Park.%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-add-line.png)


------

## 將樣式新增至行
<a name="add-styling"></a>

 在此範例中，您將為上一個範例中新增的行建立樣式。這包括定義線條的顏色、寬度、外框顏色和外框寬度，以自訂地圖上線條的視覺外觀。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "color": "#6d34b3", 
        "width": "9m",
        "outline-color": "#a8b9cc",  
        "outline-width": "2px"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%236d34b3%22,%22width%22%3A%229m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-add-line-styling.png)


------

# 如何將路由新增至靜態映射
<a name="how-to-add-route"></a>

在本主題中，您將了解如何使用 Amazon Location Service 將路由新增至靜態地圖。您將完成使用 CalculateRoutes API 取得路由的步驟，然後使用 GeoJSON 和點和線的自訂樣式，將其視覺化在靜態地圖上。

## 新增路由的步驟
<a name="steps-to-add-route"></a>

1. 從 `CalculateRoutes` API 取得路由。移除位於同一直線上的座標，以最佳化 LineString，防止查詢字串達到其限制。

1. 根據最佳化的座標集建立 GeoJSON 物件。

1. 取得 LineString 的第一個和最後一個點，並新增點幾何來標記開始和結束位置。

1. 根據您的業務需求來調整點和 LineString 的樣式，調整顏色、大小和標籤等屬性。

## 使用精簡樣式新增路由
<a name="add-route-using-compact-style"></a>

在此範例中，您會將具有起點和終點的路由新增至 中建立的行[如何將線條新增至靜態地圖](how-to-add-line-static.md)。將使用自訂樣式定義路由，包括開始和結束點的顏色、大小和標籤。

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "color": "#000000", 
        "width": "20m",
        "outline-color": "#a8b9cc",  
        "outline-width": "2px"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.11813, 49.28246]
      },
      "properties": {
        "label": "Pacific Centre",
        "icon": "bubble",
        "size": "large",
        "color": "#34B3A4",
        "outline-color": "#006400",
        "text-color": "#FFFFFF"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.13574, 49.30097]
      },
      "properties": {
        "label": "Stanley Park",
        "icon": "bubble",
        "size": "large",
        "color": "#B3346D",
        "outline-color": "#FF0000",
        "text-color": "#FFFFFF"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/static-add-route-compact.png)


------

# 如何將多邊形新增至靜態地圖
<a name="how-to-add-polygon-static"></a>

可以透過在地圖上指定多邊形來反白顯示建築物和位置，例如五邊形 （位於華盛頓特區）。

## 新增單一多邊形
<a name="polygon-single"></a>

在此範例中，您會為地圖上的五邊形建置新增多邊形 （五邊形）。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [
          [
            [
              -77.0579282196337,
              38.87264268371487
            ],
            [
              -77.05868880963534,
              38.87003145971428
            ],
            [
              -77.05560979468949,
              38.86876862025221
            ],
            [
              -77.05305311263672,
              38.87059509268525
            ],
            [
              -77.0546384387842,
              38.872985132206225
            ],
            [
              -77.0579282196337,
              38.87264268371487
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=600&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[顯示五邊形周圍多邊形的範例地圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png)


------

## 新增樣式多邊形
<a name="polygon-restyle"></a>

在此範例中，我們重新設定上一個範例中顯示的多邊形樣式。我們繪製不同顏色的多邊形 (**\$1E3F70550**)。顏色元件如下所示。
+ **E3** 代表紅色元件。
+ **F7** 代表綠色元件。
+ **05** 代表藍色元件。
+ **50** 代表 Alpha （不透明度） 元件。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [
          [
            [
              -77.0579282196337,
              38.87264268371487
            ],
            [
              -77.05868880963534,
              38.87003145971428
            ],
            [
              -77.05560979468949,
              38.86876862025221
            ],
            [
              -77.05305311263672,
              38.87059509268525
            ],
            [
              -77.0546384387842,
              38.872985132206225
            ],
            [
              -77.0579282196337,
              38.87264268371487
            ]
          ]
        ],
        "type": "Polygon"
      },
      "properties": {
        "color": "#E3F70550"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D,%22properties%22%3A%7B%22color%22%3A%22%23E3F70550%22%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[顯示五邊形周圍不同顏色多邊形的範例貼圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png)


------

## 新增多個多邊形
<a name="polygon-multiple"></a>

在此範例中，我們新增多個多邊形，以反白顯示紐約市的多個公園。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "#00800050"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.95824708489555,
              40.80055774655358
            ],
            [
              -73.9818875523859,
              40.76810261850716
            ],
            [
              -73.9729556303776,
              40.7642422333698
            ],
            [
              -73.94916953372382,
              40.79699323614054
            ],
            [
              -73.95824708489555,
              40.80055774655358
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#FF000050"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.94432602794981,
              40.80634757577718
            ],
            [
              -73.94607200977896,
              40.803869579741644
            ],
            [
              -73.94301654157768,
              40.80263972513214
            ],
            [
              -73.94127055974795,
              40.805099411561145
            ],
            [
              -73.94432602794981,
              40.80634757577718
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#0000FF50"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.9947948382843,
              40.7691390468232
            ],
            [
              -73.99564708262241,
              40.76802192177411
            ],
            [
              -73.99372953286147,
              40.76723992306512
            ],
            [
              -73.99289367783732,
              40.76835706126087
            ],
            [
              -73.9947948382843,
              40.7691390468232
            ]
          ]
        ]
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%2300800050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.95824708489555,40.80055774655358%5D,%5B-73.9818875523859,40.76810261850716%5D,%5B-73.9729556303776,40.7642422333698%5D,%5B-73.94916953372382,40.79699323614054%5D,%5B-73.95824708489555,40.80055774655358%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23FF000050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.94432602794981,40.80634757577718%5D,%5B-73.94607200977896,40.803869579741644%5D,%5B-73.94301654157768,40.80263972513214%5D,%5B-73.94127055974795,40.805099411561145%5D,%5B-73.94432602794981,40.80634757577718%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%230000FF50%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.9947948382843,40.7691390468232%5D,%5B-73.99564708262241,40.76802192177411%5D,%5B-73.99372953286147,40.76723992306512%5D,%5B-73.99289367783732,40.76835706126087%5D,%5B-73.9947948382843,40.7691390468232%5D%5D%5D%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[顯示紐約市公園周圍多個多邊形的範例地圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png)


------

# 如何設定靜態地圖的語言
<a name="set-language-static-map"></a>

您可以設定靜態映射的語言，以防您不想使用預設語言。

在此範例中，通常預設為日文文字的東京位置會以英文請求，覆寫區域預設值。

此範例顯示提供語言之請求的回應映像，以及未提供語言的回應映像。對應的標籤反映顯示請求語言的映射與顯示預設語言的映射之間的差異。

------
#### [ Request URL - English set as the language ]

```
https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&lang=en&height=700&width=700&zoom=14
```

------
#### [ Response image ]

![\[顯示五邊形周圍多邊形的範例地圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/setLanguageEnglishStaticMap.png)


------

------
#### [ Request URL - default language ]

```
https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&height=700&width=700&zoom=14
```

------
#### [ Response image ]

![\[顯示五邊形周圍多邊形的範例地圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png)


------

# 如何將鄰近圓圈新增至靜態地圖
<a name="how-to-add-proximity-circle"></a>

鄰近圓圈可提供有關報告或估計裝置或使用者位置準確性的重要洞見。透過在報告點周圍顯示圓圈，系統會通知使用者實際位置可能落入圓圈內的任何位置，因為各種因素都會影響定位精確度。這增加了清晰度，有助於決策並增強導航安全性。

在此範例中，您會在巴黎的艾菲爾鐵塔附近新增 500 公尺的接近圓圈。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          2.298151,
          48.855921
        ]
      },
      "properties": {
        "style": "circle",
        "color": "#007BFF50",
        "width": "500m"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          2.298151,
          48.855921
        ]
      },
      "properties": {
        "icon": "cp",
        "color": "#007BFF",
        "text-color":"#DC3545",
        "text-outline-color":"#007BFF",
        "outline-width":"20px",
        "label": "You are here",
        "size": "large"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map@2x?style=Satellite&width=700&height=700&zoom=17&center=2.2958,48.8570&geojson-overlay=%7B%20%20%22type%22%3A%20%22FeatureCollection%22,%20%20%22features%22%3A%20%5B%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22style%22%3A%20%22circle%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF50%22,%20%20%20%20%20%20%20%20%22width%22%3A%20%22500m%22%20%20%20%20%20%20%7D%20%20%20%20%7D,%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22icon%22%3A%20%22cp%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF%22,%20%20%20%20%20%20%20%20%22text-color%22%3A%22%23DC3545%22,%20%20%20%20%20%20%20%20%22text-outline-color%22%3A%22%23007BFF%22,%20%20%20%20%20%20%20%20%22outline-width%22%3A%2220px%22,%20%20%20%20%20%20%20%20%22label%22%3A%20%22You%20are%20here%22,%20%20%20%20%20%20%20%20%22size%22%3A%20%22large%22%20%20%20%20%20%20%7D%20%20%20%20%7D%20%20%5D%7D&key=your_API_Key             
```

------
#### [ Response image ]

![\[顯示圍繞艾菲爾鐵塔的接近圓圈的範例地圖。\]](http://docs.aws.amazon.com/zh_tw/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png)


------

# 管理成本和用量
<a name="maps-whats-next"></a>

當您繼續了解 Amazon Location 地圖時，請務必了解如何管理服務容量、確保遵循用量限制，並透過配額和 API 最佳化獲得最佳結果。透過套用效能和準確性的最佳實務，您可以自訂應用程式以有效率地處理位置相關查詢，並最大化您的 API 請求。

**Topics**
+ [Amazon Location Service 的最佳實務](maps-best-practices.md)
+ [Maps 定價](maps-pricing.md)
+ [映射配額和用量](map-quota-and-usage.md)

# Amazon Location Service 的最佳實務
<a name="maps-best-practices"></a>

使用 Amazon Location Service 時，遵循最佳實務可確保您的地圖針對效能、準確性和使用者體驗進行最佳化。本節概述使用靜態地圖、地理邊界和 GeoJSON 資料來增強地圖功能和視覺化的重要考量。

## 動態映射
<a name="next-dynamic-maps"></a>

以下是在 Amazon Location Service 中使用動態地圖的一些最佳實務。

### 使用 MapLibre 進行轉譯最佳化
<a name="next-dynamic-rendering"></a>

以下是 MapLibre 的幾個功能，可協助最佳化 AWS 地圖樣式的轉譯。如需詳細資訊，請參閱[AWS 映射樣式和功能](map-styles.md)。

#### 略過驗證樣式
<a name="next-dynamic-validation"></a>

如果您使用的是 AWS 地圖樣式，請將 `validateStyle`設定為 `false`。這會關閉載入時間樣式驗證，加速初始映射載入。映射樣式不需要 AWS 樣式驗證，因為它們已預先驗證。

------
#### [ Example ]

```
const map = new maplibregl.Map({
    container: 'map', // ID of the div where the map will render
    style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`, // Map style URL
    center: [0, 0], // Starting position [lng, lat]
    zoom: 2, // Starting zoom
    validateStyle: false, // Disable style validation for faster map load
});
```

------
#### [ Explanation ]
+ `validateStyle: true`：這可根據 MapLibre GL 樣式規格來驗證映射樣式。如果樣式中有任何問題，它們會記錄在 主控台中。
+ 如果您將此設定為 `false`，映射會略過樣式驗證程序，這可能會導致載入速度更快，但不會檢查錯誤。

------

#### 預熱地圖
<a name="next-dynamic-prewarm"></a>

對於可能會在使用者瀏覽應用程式時多次建立和銷毀映射的單頁應用程式 (SPAs)，預熱函數可以減少在銷毀映射後重新建立映射的延遲。

此功能僅建議用於 SPAs。

## 靜態映射
<a name="next-static-maps"></a>

### 邊界、週框方塊 （方塊）
<a name="bounds-bbox"></a>

使用地圖和地理資料時，準確定義週框方塊 (`bbox`) 和週框參數至關重要，因為它們決定了感興趣的地理區域。任何不正確都可能導致不理想的結果。

**確保精確邊界**  
確保指定的邊界精確地代表您要顯示的區域。即使稍微不準確，也可以裁切或排除所需區域的部分，從而破壞視覺化的目的。

**驗證適當的縮放層級**  
地圖的縮放等級會根據指定的邊界或 Bbox 自動計算。確認產生的縮放等級為整個感興趣區域提供適當的詳細資訊和可見性。如果縮放太高或太低，地圖可能無法有效地傳達所需的資訊。

**檢查自訂覆蓋可見性**  
搭配 GeoJSON 功能等自訂浮水印使用 Bbox 或邊界時，請確定功能的範圍落在產生的映射影像內。延伸超過邊界的功能可能會被裁剪或省略，導致不完整或誤導的視覺化效果。

**搭配 Bbox 使用填補**  
使用 Bbox 搭配填補參數，以確保靠近邊緣的映射功能完全可見，而不會截斷。

透過準確定義 Bbox 和邊界參數，您可以確保映射正確地代表所需的地理區域，提供適當的細節層級，並有效地整合自訂浮水印或資料層。

## GeoJSON
<a name="geojson-best-practices"></a>

使用 GeoJSON 資料時，透過縮小 GeoJSON 來最佳化查詢字串，可協助您保持在查詢字串限制內，尤其是大型資料集。

# Maps 定價
<a name="maps-pricing"></a>

Amazon Location Service 根據映射請求的類型和進行的 API 呼叫數量，為其映射 API 提供競爭定價。本節提供動態和靜態地圖定價結構的概觀。

如需詳細的定價資訊，請參閱 [Amazon Location Service 定價](https://aws.amazon.com/location/pricing/)。

## 動態映射
<a name="dynamic-maps-pricing"></a>

Maps API 的定價是以 `GetTiles` API 擷取的圖磚數量為基礎

其他地圖相關的 APIs，例如 `GetGlyphs`、 `GetStyleDescriptor`和 `GetSprites` 免費。

## 靜態地圖影像
<a name="static-maps-pricing"></a>

靜態地圖映像的定價取決於對 `GetStaticMap` API 提出的請求數量。靜態地圖影像的每個請求都會計入定價計算。

# 映射配額和用量
<a name="map-quota-and-usage"></a>

Amazon Location Service 會針對動態和靜態映射施加特定的服務配額和用量限制。這些限制會實施，以確保所有使用者的公平使用和效能效率。以下是每個服務的服務配額和可調整的限制。

## Service Quotas
<a name="service-quota"></a>

Amazon Location Service 會為 APIs 設定預設配額，以協助管理可在服務[AWS 配額管理主控台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)中檢視的服務容量。您可以透過[自助式主控台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)請求增加配額，最多可達每個 API 預設限制的兩倍。

對於超過預設限制兩倍的配額限制，請透過自助式主控台請求，並自動提交支援票證。或者，與您的高級支援團隊聯絡。

配額增加請求不會產生直接費用，但根據使用的額外資源，較高的用量層級可能會導致服務成本增加。如需詳細資訊，請參閱[使用 Service Quotas 管理配額](manage-quotas.md)。

### 動態映射
<a name="dynamic-map-quota"></a>


| API 名稱 | 預設 | 最大可調整限制 | 超過可調整的最大限制 | 
| --- | --- | --- | --- | 
|  `GetTiles`  |  2000  |  4000  | 請求[服務配額主控台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)或聯絡支援團隊 | 

### 靜態映射
<a name="static-map-quota"></a>


| API 名稱 | 預設 | 最大可調整限制 | 超過可調整的最大限制 | 
| --- | --- | --- | --- | 
|  `GetStaticMap`  |  50  |  100  | 請求[服務配額主控台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)或聯絡支援團隊 | 

## 用量限制
<a name="other-usage-limits"></a>


| API 名稱 | 限制 | Value | 
| --- | --- | --- | 
|  `GetStyleDescriptor`  |  每個 IP 地址每秒的最大請求數。  |  5000  | 
|  `GetGlyphys`  |  每個 IP 地址每秒的最大請求數。  | 5000 | 
|  `GetSprites`  |  每個 IP 地址每秒的最大請求數。  | 5000 | 
|  `GetStaticMap`  |  壓縮後的回應承載大小。  |  6MB  | 
|  `GetTiles`  |  壓縮後的回應承載大小。  |  6MB  | 

## 條款
<a name="terms-to-use"></a>

如需詳細資訊，請參閱[使用條款和資料歸因](data-attribution.md)。