Fügen Sie Ihrer Anwendung die Amazon-Standortsuche hinzu

Der letzte Schritt für Ihre Anwendung besteht darin, die Suche auf der Karte hinzuzufügen. In diesem Fall fügen Sie eine umgekehrte Geokodierungssuche hinzu, bei der Sie die Elemente an einem Ort finden.

Anmerkung

Amazon Location Service bietet auch die Möglichkeit, nach Namen oder Adresse zu suchen, um die Standorte von Orten auf der Karte zu finden.

Um Ihrer Anwendung Suchfunktionen hinzuzufügen

1. Öffnen Sie die main.js Datei, die Sie im vorherigen Abschnitt erstellt haben.

2. Ändern Sie die main Funktion wie gezeigt. Die Änderungen, die Sie vornehmen müssen, finden Sie untergreen.

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

   Dieser Code beginnt mit der Einrichtung des Amazon Location-Authentifizierungshelfers für die Verwendung Ihres API Schlüssels.

   const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

   Dann verwendet es diesen Authentifizierungshelfer und die Region, die Sie verwenden, um einen neuen Amazon Location-Client zu erstellen.

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

   Als Nächstes reagiert der Code darauf, dass der Benutzer einen Punkt auf der Kartensteuerung auswählt. Dazu wird ein MapLibre bereitgestelltes Ereignis für abgefangenclick.

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

   Das MapLibre click Ereignis stellt Parameter bereit, die den vom Benutzer ausgewählten Breiten- und Längengrad enthalten (e.lngLat). Innerhalb des click Ereignisses erstellt der Code die, searchPlaceIndexForPositionCommand um die Entitäten auf dem angegebenen Breiten- und Längengrad zu finden.

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

   Hier IndexName ist der Name der Ortsindex-Ressource, die Sie zuvor erstellt haben, der Position Breiten- und Längengrad, nach dem gesucht werden Language soll, die bevorzugte Sprache für Ergebnisse und MaxResults teilt Amazon Location mit, nur maximal fünf Ergebnisse zurückzugeben.

   Der verbleibende Code sucht nach einem Fehler und zeigt dann die Ergebnisse der Suche in dem response aufgerufenen <pre> Element sowie das oberste Ergebnis in einem Warnfeld an.

3. (Optional) Wenn Sie die quickstart.html Datei jetzt speichern und in einem Browser öffnen, wird Ihnen bei Auswahl eines Standorts auf der Karte der Name oder die Adresse des ausgewählten Ortes angezeigt.

4. Der letzte Schritt in der Anwendung besteht darin, mithilfe der MapLibre Funktion eine Markierung an der vom Benutzer ausgewählten Stelle hinzuzufügen. Ändern Sie die main Funktion wie folgt. Die Änderungen, die Sie vornehmen müssen, finden Sie untergreen.

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

   Dieser Code deklariert eine marker Variable, die jedes Mal aufgefüllt wird, wenn der Benutzer einen Standort auswählt, und zeigt, wo er ausgewählt hat. Die Markierung wird automatisch vom Map-Steuerelement gerendert, sobald sie der Karte mit .addTo(map); hinzugefügt wurde. Der Code sucht auch nach einer vorherigen Markierung und entfernt sie, sodass jeweils nur eine Markierung auf dem Bildschirm angezeigt wird.

5. Speichern Sie die main.js Datei, und öffnen Sie sie in einem Browser. quickstart.html Sie können die Karte wie bisher schwenken und zoomen, aber wenn Sie jetzt einen Standort auswählen, werden Ihnen Details zu dem ausgewählten Ort angezeigt.

   

Ihr Schnellstart-Antrag ist abgeschlossen. Dieses Tutorial hat Ihnen gezeigt, wie Sie eine statische HTML Anwendung erstellen, die:

• Erstellt eine Map, mit der Benutzer interagieren können.

• Behandelt ein Kartenereignis (click).

• Ruft einen Amazon Location Service aufAPI, speziell um die Karte an einem Standort zu durchsuchen, mithilfe vonsearchPlaceIndexForPosition.

• Verwendet das MapLibre Kartensteuerelement, um eine Markierung hinzuzufügen.