Aggiungi Amazon Location Search alla tua applicazione

Per aggiungere funzionalità di ricerca alla tua applicazione

1. Apri il main.js file che hai creato nella sezione precedente.

2. Modificate la main funzione, come illustrato. Le modifiche da apportare sono mostrate ingreen.

   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.");
       }
     });
   }

   Questo codice inizia configurando l'helper di autenticazione Amazon Location per utilizzare la tua API chiave.

   const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

   Quindi utilizza l'helper di autenticazione e la regione che stai utilizzando per creare un nuovo client Amazon Location.

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

   Successivamente, il codice risponde all'utente che sceglie un punto sul controllo della mappa. Lo fa rilevando un evento MapLibre fornito per. click

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

   L' MapLibre clickevento fornisce parametri che includono la latitudine e la longitudine scelte dall'utente (). e.lngLat All'interno dell'clickevento, il codice crea il comando searchPlaceIndexForPositionCommand per trovare le entità alla latitudine e alla longitudine specificate.

       // 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);
         ...
       });

   Qui, IndexName il nome della risorsa Place Index che hai creato in precedenza, la Position latitudine e la longitudine da cercare, Language è la lingua preferita per i risultati e indica ad MaxResults Amazon Location di restituire solo un massimo di cinque risultati.

   Il codice rimanente verifica la presenza di un errore, quindi visualizza i risultati della ricerca nell'<pre>elemento chiamato response e mostra il risultato principale in una casella di avviso.

3. (Facoltativo) Se adesso salvate e aprite il quickstart.html file in un browser, scegliendo una posizione sulla mappa vi mostrerà il nome o l'indirizzo del luogo scelto.

4. Il passaggio finale dell'applicazione consiste nell'utilizzare la MapLibre funzionalità per aggiungere un marker nel punto selezionato dall'utente. Modificate la main funzione come segue. Le modifiche da apportare sono mostrate ingreen.

   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);
   
   ...

   Questo codice dichiara una marker variabile, che viene compilata ogni volta che l'utente seleziona una posizione, mostrando dove è stata selezionata. Il marker viene renderizzato automaticamente dal controllo della mappa, una volta aggiunto alla mappa con. .addTo(map); Il codice verifica anche la presenza di un marker precedente e lo rimuove, in modo che sullo schermo sia presente un solo marker alla volta.

5. Salvate il main.js file e aprite il quickstart.html file in un browser. È possibile eseguire la panoramica e lo zoom sulla mappa, come in precedenza, ma ora se si sceglie una posizione, verranno visualizzati i dettagli relativi alla posizione scelta.