Agregar la búsqueda de Amazon Location a su aplicación

Para agregar la funcionalidad de búsqueda a su aplicación

1. Abra el archivo main.js que creó en la sección anterior.

2. Modifique la función main, como se muestra. Los cambios que debe realizar se muestran en 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.");
       }
     });
   }

   Este código inicia la configuración del asistente de autenticación de Amazon Location para que utilice su clave de API.

   const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

   A continuación, utiliza ese asistente de autenticación y la región que está utilizando para crear un nuevo cliente de Amazon Location.

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

   Y por último, el código responde a la elección del usuario de un punto en el control del mapa. Para ello, captura un evento proporcionado por MapLibre para click.

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

   El evento click de MapLibre proporciona parámetros que incluyen la latitud y la longitud elegidas por el usuario (e.lngLat). En el interior del evento click, el código crea el searchPlaceIndexForPositionCommand para buscar las entidades en la latitud y longitud determinadas.

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

   Aquí, IndexName es el nombre del recurso de índice de ubicación que creó anteriormente, la Position es la latitud y la longitud que se deben buscar, Language es el idioma preferido para los resultados y MaxResults le indica a Amazon Location que envíe solo un máximo de cinco resultados.

   El código restante comprueba si hay algún error y, a continuación, muestra los resultados de la búsqueda en el <pre> elemento denominado response y muestra el resultado superior en un cuadro de alerta.

3. (Opcional) Si ahora guarda y abre el archivo quickstart.html en un navegador, al elegir una ubicación en el mapa se mostrará el nombre o la dirección del lugar que ha elegido.

4. El último paso de la aplicación consiste en utilizar la funcionalidad de MapLibre para agregar un marcador en el lugar que el usuario haya seleccionado. Modifique la función main de la siguiente manera. Los cambios que debe realizar se muestran en 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);
   
   ...

   Este código declara un marker variable que se rellena cada vez que el usuario selecciona una ubicación y muestra dónde la seleccionó. El control del mapa representa automáticamente el marcador una vez que se agrega al mapa con .addTo(map);. El código también comprueba si hay un marcador anterior y lo elimina, de modo que solo haya un marcador en la pantalla a la vez.

5. Guarde el archivo main.js y abra el archivo quickstart.html en un navegador. Puede desplazarse y hacer zoom en el mapa, como antes, pero ahora, si elige una ubicación, verá detalles sobre la ubicación que ha elegido.