`中設定此樣式，以視需要為您的應用程式設定維度。您必須從 GitHub 儲存庫下載 CSS 檔案 `style.css`。這將協助您專注於商業邏輯。
將 `style.css`和 `index.html` 檔案儲存在相同的資料夾中。
從 [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css) 下載 `style.css` 檔案。
```
```
#### 新增 API 金鑰和 AWS 區域詳細資訊
將您在此檔案中建立的 API [使用 API 金鑰進行身分驗證](using-apikeys.md) 金鑰，以及建立金鑰 AWS 的區域。
```
.....
.....
```
### 將地圖新增至您的應用程式
在本節中，我們會將 Map 功能新增至應用程式。開始之前，您的檔案應位於此資料夾結構中。
如果尚未這麼做，請從 [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css) 下載`style.css`檔案。
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
```
#### 建立 函數以初始化映射
若要設定映射，請在行 `initializeMap(...)`後面建立下列函數 `//Add functions`。
選擇初始中心位置和縮放層級。在此範例中，我們將地圖中心設定為加拿大 Vancouver，縮放層級為 10。新增導覽控制項以輕鬆縮放。
```
/**
* Initializes the map with the specified style and color scheme.
*/
function initializeMap(mapStyle = "Standard", colorScheme = "Dark") {
const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;
const map = new maplibregl.Map({
container: 'map', // The ID of the map container
style: styleUrl, // The style URL for the map
center: [-123.116226, 49.246292], // Starting center coordinates
zoom: 10, // Initial zoom level
validateStyle: false // Disable style validation
});
return map; // Return the initialized map
}
```
#### 初始化映射
呼叫 `initializeMap(...)` 以初始化映射。或者，您可以在`initializeMap`函數之後，使用您偏好的樣式和顏色方案來初始化它。如需更多樣式選項，請參閱 [AWS 映射樣式和功能](map-styles.md)。
```
// Step 1: Setup API Key and AWS Region
const API_KEY = "Your_API_Key";
const AWS_REGION = "Region_where_you_created_API_Key";
// Step 2.1 Add maps to application
// Step 2.2 initialize the map
const map = initializeMap("Standard","Light");
// Step 3: Add places features to application
```
在瀏覽器`index.html`中開啟 以查看正在執行的映射。
#### 新增導覽控制項
或者，您可以將導覽控制項 （縮放和旋轉） 新增至地圖。這應該在呼叫 之後完成`initializeMap(...)`。
```
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places features to application
```
#### 檢閱地圖程式碼
恭喜您！您的第一個應用程式已準備好使用映射。在瀏覽器`index.html`中開啟 。請確定 `style.css` 位於與 相同的資料夾中`index.html`。
您的最終 HTML 看起來應該如下所示：
```
Amazon Location Service - Getting Started with First Map App
```
### 將位置新增至您的應用程式
在本節中，我們將設定新增位置功能到應用程式。從 GitHub 下載 JavaScript 檔案[https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js)。
開始之前，您的檔案應位於此資料夾結構中：
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### 建立 函數以建立 GeoPlaces
若要新增搜尋功能，請使用 `AuthHelper`和 初始化 `GeoPlaces`類別`AmazonLocationClient`。在 中的``標籤之前新增下列`getGeoPlaces(map)`函數`index.html`。
```
/**
* Gets a GeoPlaces instance for Places operations.
*/
function getGeoPlaces(map) {
const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region
const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client
const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance
return geoPlaces; // Return the GeoPlaces instance
}
```
#### 建立 函數以將搜尋方塊新增至應用程式
在 中的``標籤之前新增下列 `addSearchBox(map, geoPlaces)``renderPopup(feature)`、 和 `createPopup(feature)`函數`index.html`，以完成搜尋功能設定。
```
/**
* Adds search box to the map.
*/
function addSearchBox(map, geoPlaces) {
const searchBox = new MaplibreGeocoder(geoPlaces, {
maplibregl,
showResultsWhileTyping: true, // Show results while typing
debounceSearch: 300, // Debounce search requests
limit: 30, // Limit number of results
popuprender: renderPopup, // Function to render popup
reverseGeocode: true, // Enable reverse geocoding
zoom: 14, // Zoom level on result selection
placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box.
});
// Add the search box to the map
map.addControl(searchBox, 'top-left');
// Event listener for when a search result is selected
searchBox.on('result', async (event) => {
const { id, result_type } = event.result; // Get result ID and type
if (result_type === "Place") { // Check if the result is a place
const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place
if (placeResults.features.length) {
createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place
}
}
});
}
/**
* Renders the popup content for a given feature.
*/
function renderPopup(feature) {
return `
`;
}
/**
* Creates a popup for a given feature and sets its position.
*/
function createPopup(feature) {
return new maplibregl.Popup({ offset: 30 }) // Create a new popup
.setLngLat(feature.geometry.coordinates) // Set the popup position
.setHTML(renderPopup(feature)); // Set the popup content
}
```
#### 將搜尋方塊新增至應用程式
呼叫 `getGeoPlaces(map)` 3.1 節中定義的 來建立`GeoPlaces`物件，然後呼叫 `addSearchBox(map, geoPlaces)`將搜尋方塊新增至應用程式。
```
// Step 2: Add maps to application
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
```
您的位置搜尋已準備好可供使用。在瀏覽器`index.html`中開啟 以查看其運作中的狀態。
#### 新增函數以在使用者按一下地圖時顯示快顯視窗
建立 函數`addMapClick(map, geoPlaces)`，以在使用者按一下地圖時顯示快顯視窗。在``標籤前面新增此函數。
```
/**
* Sets up reverse geocoding on map click events.
*/
function addMapClick(map, geoPlaces) {
map.on('click', async ({ lngLat }) => { // Listen for click events on the map
const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding
if (response.features.length) { // If there are results
const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker
const feature = response.features[0]; // Get the clicked feature
const clickedPopup = createPopup(feature); // Create popup for the clicked feature
clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position
.setPopup(clickedPopup) // Attach popup to marker
.addTo(map); // Add marker to the map
clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed
}
});
}
```
#### 呼叫 函數以新增對應點選功能
若要啟用地圖點選動作，請在包含 的行`addMapClick(map, geoPlaces)`後面呼叫 `addSearchBox(map, geoPlaces)`。
```
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
// Step 3.3: Setup map click functionality
addMapClick(map, geoPlaces);
```
#### 檢閱地圖和位置應用程式
恭喜您！您的第一個應用程式已準備好使用 Maps and Places。在瀏覽器`index.html`中開啟 。確定 `style.css`和 `utils.js` 位於與 相同的資料夾中`index.html`。
您的最終 HTML 看起來應該如下所示：
```
Amazon Location Service - Getting Started with First Map App
```
### 探索更多
您已完成快速入門教學課程，並應了解 Amazon Location Service 如何用於建置應用程式。若要進一步了解 Amazon Location，您可以查看下列資源：
+ **查詢建議詳細資訊** - 考慮將 `GeoPlaces` 類別或使用類似的方法來 `ReverseGeocode`，以取得 `Suggestion` API 傳回之結果的詳細資訊。
+ **選擇適合您業務需求的 API** - 若要判斷符合您需求的最佳 Amazon Location API，請查看此資源：[選擇正確的 API](choose-an-api.md)。
+ **請參閱 Amazon Location "how-to" 指南** - 請造訪 [Amazon Location Service 開發人員指南](https://docs.aws.amazon.com/location/)以取得教學課程和其他資源。
+ **文件和產品資訊** - 如需完整的文件，請參閱 [Amazon Location Service 開發人員指南](https://docs.aws.amazon.com/location/)。若要進一步了解產品，請前往 [Amazon Location Service 產品](https://aws.amazon.com/location)頁面。