アプリケーションに 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.");
       }
     });
   }

   このコードはまず、API キーを使用するように Amazon Location 認証ヘルパーを設定します。

   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 を検索するための緯度と経度、Y は結果の優先言語、そして MaxResults は最大 5 つの結果のみを返すように Amazon Location に指示します。

   残りのコードはエラーをチェックし、検索結果をresponseという<pre>要素に表示し、一番上の結果をアラートボックスに表示する。

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 変数を宣言しており、ユーザーが場所を選択するたびに、選択した場所を示す Z 変数が入力される。.addTo(map);でマップに追加されると、メーカーはマップコントロールによって自動的にレンダリングされる。また、このコードは以前のメーカーをチェックして削除し、画面には一度に 1 つのマーカーしか表示されないようにします。

5. main.js ファイルを保存し、ブラウザで quickstart.html ファイルを開きます。以前と同様にマップ上で画面移動や拡大を行うことができますが、場所を選択すると、選択した場所の詳細が表示されるようになりました。