本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
現在您擁有架構和 div 預留位置，您可以將地圖控制項新增至應用程式。本教學課程使用 MapLibre GL JS
將互動式地圖新增至您的應用程式
-
開啟您在上一節中建立
quickstart.html的檔案。 -
將參考新增至所需的程式庫，以及您要建立的指令碼檔案。您需要進行的變更會顯示在 中
green。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --><link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /><link href="main.css" rel="stylesheet" /> </head> <body> ... <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer><!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script> <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script> <!-- JavaScript for the app --> <script src="main.js"></script></body> </html>這會將下列相依性新增至您的應用程式：
-
MapLibre GL JS 。此程式庫和樣式表包含地圖控制項，可顯示地圖動態磚並包含互動性，例如平移和縮放。控制項也允許擴充功能，例如在地圖上繪製您自己的功能。
-
Amazon Location 用戶端 。這為取得地圖資料和搜尋地圖上的位置所需的 Amazon Location 功能提供介面。Amazon Location 用戶端是以 JavaScript v3 AWS SDK的 為基礎。
-
Amazon Location Authentication Helper 。這提供使用API金鑰或 Amazon Cognito 來驗證 Amazon Location Service 的有用函數。
此步驟也會將參考新增至
main.js，接下來您將建立該參考。 -
-
儲存
quickstart.html檔案。 -
在
main.js與您的 HTML和 檔案相同的資料夾中建立新的名為 CSS的檔案，然後開啟它進行編輯。 -
將下列指令碼新增至您的檔案。中的文字
red應該以您先前建立的API索引鍵值、地圖資源名稱和放置資源名稱，以及您所在區域的區域識別符 （例如us-east-1） 取代。// Amazon Location Service resource names: const mapName = "explore.map"; const placesName = "explore.place"; const region = "your_region"; const apiKey = "v1.public.a1b2c3d4...// Initialize a map async function initializeMap() { const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key }); // Add navigation control to the top left of the map mlglMap.addControl(new maplibregl.NavigationControl(), "top-left"); return mlglMap; } async function main() { // Initialize map and Amazon Location SDK client: const map = await initializeMap(); } main();此程式碼會設定 Amazon Location 資源，然後設定和初始化 MapLibre GL JS 地圖控制，並使用 ID 放在您的
<div>元素中map。initializeMap()函數必須了解。它會建立新的 MapLibre 地圖控制項 （在mlglMap本機稱為 ，但在程式碼的其餘map部分稱為 ），用於在應用程式中呈現地圖。// Initialize the map const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key });當您建立新的 MapLibre 地圖控制項時，您傳遞的參數會指出地圖控制項的初始狀態。在這裡，我們設定下列參數。
-
HTML 容器，其使用我們 中的映射 div 元素HTML。
-
映射到華盛頓哥倫比亞特區某個點的初始中心。
-
將層級縮放至 16 （分割為鄰里或區塊層級）。
-
用於映射的樣式，它讓 MapLibre URL使用 來取得映射圖磚和其他資訊來呈現映射。請注意，這URL包含您的身分驗證API金鑰。
-
-
儲存您的 JavaScript 檔案，並使用瀏覽器開啟檔案。您現在的頁面上有地圖，您可以在其中使用平移和縮放動作。
注意
您可以使用此應用程式來查看 MapLibre 地圖控制項的行為。您可以在使用拖曳操作時嘗試使用 Ctrl 或 Shift，以查看與地圖互動的其他方法。所有此功能都可自訂。
您的應用程式即將完成。在下一節中，您將處理在地圖上選擇位置，並顯示所選位置的地址。您也可以JSON在頁面上顯示結果，以查看完整結果。
