將 Amazon Location 搜尋新增至您的應用程式

將搜尋功能新增至您的應用程式

1. 開啟您在上一節中建立main.js的檔案。

2. 修改main函數，如圖所示。您需要進行的變更會顯示在 中green。

   async function main() {
     // Create an authentication helper instance using an API key
     const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);
   
   
     // Initialize map and Amazon Location SDK client:
     const map = await initializeMap();
   
     const client = new amazonLocationClient.LocationClient({
       region,
       ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location
     });
   
   
     // On mouse click, display marker and get results:
     map.on("click", async function (e) {
       // Set up parameters for search call
       let params = {
         IndexName: placesName,
         Position: [e.lngLat.lng, e.lngLat.lat],
         Language: "en",
         MaxResults: "5",
       };
   
       // Set up command to search for results around clicked point
       const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);
   
       try {
         // Make request to search for results around clicked point
         const data = await client.send(searchCommand);
   
         // Write JSON response data to HTML
         document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2);
   
         // Display place label in an alert box
         alert(data.Results[0].Place.Label);
       } catch (error) {
         // Write JSON response error to HTML
         document.querySelector("#response").textContent = JSON.stringify(error, undefined, 2);
   
         // Display error in an alert box
         alert("There was an error searching.");
       }
     });
   }

   此程式碼從設定 Amazon Location Authentication 協助程式使用您的API金鑰開始。

   const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

   然後，它會使用該身分驗證協助程式，以及您用來建立新的 Amazon Location 用戶端的區域。

   const client = new amazonLocationClient.LocationClient({
       region,
       ...authHelper.getLocationClientConfig(),
     });

   接下來，程式碼會回應在地圖控制項上選擇位置的使用者。方法是擷取 MapLibre 提供的事件click。

   map.on("click", async function(e) {
       ...
     });

   事件 MapLibre click提供參數，其中包含使用者選擇的緯度和經度 （e.lngLat）。在click事件中，程式碼會建立 searchPlaceIndexForPositionCommand以尋找指定緯度和經度的實體。

       // Set up parameters for search call
       let params = {
         IndexName: placesName,
         Position: [e.lngLat.lng, e.lngLat.lat],
         Language: "en",
         MaxResults: "5"
       };
   
       // Set up command to search for results around clicked point
       const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);
   
       try {
         // Make request to search for results around clicked point
         const data = await client.send(searchCommand);
         ...
       });

   在這裡， IndexName 是您先前建立的位置索引資源名稱、 Position是要搜尋的緯度和經度、 Language是結果的偏好語言，並MaxResults指示 Amazon Location 最多只傳回五個結果。

   剩餘的程式碼會檢查是否有錯誤，然後在名為 的 <pre>元素中顯示搜尋結果response，並在警示方塊中顯示最上方結果。

3. （選用） 如果您現在在瀏覽器中儲存和開啟quickstart.html檔案，在地圖上選擇位置會顯示您選擇的位置名稱或地址。

4. 應用程式中的最後一個步驟是使用 MapLibre 功能，在使用者選取的位置新增標記。修改main函數，如下所示。您需要進行的變更會顯示在 中green。

   async function main() {
     // Create an authentication helper instance using an API key
     const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);
   
     // Initialize map and Amazon Location SDK client
     const map = await initializeMap();
     const client = new amazonLocationClient.LocationClient({
       region,
       ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location
     });
   
     // Variable to hold marker that will be rendered on click
     let marker;
   
     // On mouse click, display marker and get results:
     map.on("click", async function (e) {
       // Remove any existing marker
       if (marker) {
         marker.remove();
       }
   
       // Render a marker on clicked point
       marker = new maplibregl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);
   
       // Set up parameters for search call
       let params = {
         IndexName: placesName,
         Position: [e.lngLat.lng, e.lngLat.lat],
         Language: "en",
         MaxResults: "5",
       };
   
       // Set up command to search for results around clicked point
       const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);
   
   ...

   此程式碼會宣告變數，該marker變數會在每次使用者選取位置時填入，顯示他們選取的位置。標記一旦使用 新增至地圖，便會由地圖控制項自動呈現.addTo(map);。程式碼也會檢查先前的標記，並將其移除，以便一次畫面上只有 1 個標記。

5. 儲存main.js檔案，然後在瀏覽器中開啟quickstart.html檔案。您可以像往常一樣在地圖上平移和縮放，但現在如果您選擇位置，您會看到所選位置的詳細資訊。