Anzeigen von Suchergebnissen auf der Karte

In diesem Artikel erfahren Sie, wie nach einem bestimmten Ort gesucht wird und die Suchergebnisse auf der Karte angezeigt werden.

Es gibt zwei Möglichkeiten, um nach einem bestimmten Ort zu suchen. Eine Möglichkeit besteht darin, über ein Dienstmodul eine Suchanforderung zu stellen. Die andere Möglichkeit ist, eine Suchanforderung über die Fetch-API an die Azure Maps-API für die Fuzzysuche zu stellen. Beide Möglichkeiten werden im Folgenden erläutert.

Durchführen einer Suchanforderung über das Dienstmodul

Im obigen Code erstellt der erste Block ein Kartenobjekt und legt als Authentifizierungsmechanismus die Verwendung des Zugriffstokens fest. Eine Anleitung finden Sie unter Erstellen einer Karte.

Der zweite Codeblock erstellt ein TokenCredential-Element, um HTTP-Anforderungen an Azure Maps mit dem Zugriffstoken zu authentifizieren. Anschließend wird das TokenCredential-Element an atlas.service.MapsURL.newPipeline() übergeben, und es wird eine Pipeline-Instanz erstellt. searchURL stellt eine URL zu Suchvorgängen von Azure Maps dar.

Der dritte Codeblock erstellt mit der DataSource-Klasse ein Datenquellenobjekt und fügt diesem Suchergebnisse hinzu. Eine Symbolebene verwendet Text oder Symbole zum Rendern punktbasierter Daten, die in DataSource als Symbole auf der Karte umschlossen sind. Anschließend wird eine Symbolebene erstellt. Die Datenquelle wird der Symbolebene hinzugefügt, die dann der Karte hinzugefügt wird.

Der vierte Codeblock verwendet die SearchFuzzy-Methode im Dienstmodul. Sie ermöglicht über die REST-API „Get Search“ für die Fuzzysuche die Freitextsuche nach Points of Interest. Abrufanforderungen an die API „Search Fuzzy“ (Fuzzysuche) können jede Kombination von Fuzzyeingaben verarbeiten. Eine GeoJSON-Funktionssammlung aus der Antwort wird dann mit der geojson.getFeatures()-Methode extrahiert und der Datenquelle hinzugefügt, und die Daten werden über die Symbolebene automatisch auf der Karte gerendert.

Im letzten Codeblock werden mithilfe der Maps-Eigenschaft setCamera die Kameragrenzen für die Karte angepasst.

Die Suchanforderung, die Datenquelle, die Symbolebene und die Kameragrenzen befinden sich innerhalb des Ereignislisteners der Karte. Wir möchten sicherstellen, dass die Ergebnisse nach dem vollständigen Laden der Karte angezeigt werden.

Durchführen einer Suchanforderung über die Fetch-API

Mit dem ersten Block des oben gezeigten Codes wird ein Kartenobjekt erstellt. Es legt den Authentifizierungsmechanismus für die Verwendung des Zugriffstokens fest. Eine Anleitung finden Sie unter Erstellen einer Karte.

Der zweite Codeblock erstellt eine URL, an die eine Suchanforderung gerichtet werden kann. Außerdem werden zwei Arrays erstellt, um Grenzen und Markierungen für Suchergebnisse zu speichern.

Der dritte Codeblock verwendet die Fetch-API. Mit der Fetch-API wird eine Anforderung an die Azure Maps-API für die Fuzzysuche gestellt, um nach den Points of Interest zu suchen. Die API für die Fuzzysuche kann eine beliebige Kombination von Fuzzyeingaben verarbeiten. Anschließend verarbeitet und analysiert sie die Suchantwort und fügt die Ergebnismarkierungen dem searchPins-Array hinzu.

Im vierten Codeblock wird mit der DataSource-Klasse ein Datenquellenobjekt erstellt. Im Code fügen wir Suchergebnisse zum Quellobjekt hinzu. Eine Symbolebene verwendet Text oder Symbole zum Rendern punktbasierter Daten, die in DataSource als Symbole auf der Karte umschlossen sind. Anschließend wird eine Symbolebene erstellt. Die Datenquelle wird der Symbolebene hinzugefügt, die dann der Karte hinzugefügt wird.

Der letzte Codeblock erstellt ein BoundingBox-Objekt. Es verwendet das Array der Ergebnisse und passt dann die Kameragrenzen für die Karte mithilfe der setCamera-Eigenschaft der Karte an. Anschließend werden die Ergebnismarkierungen gerendert.

Die Suchanforderung, die Datenquelle, die Symbolebene und die Kameragrenzen werden im Ereignislistener der Karte festgelegt, um sicherzustellen, dass die Ergebnisse nach dem vollständigen Laden der Karte angezeigt werden.

Nächste Schritte

Weitere Informationen zur Fuzzysucheuche:

Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:

Map

Die folgenden Artikel enthalten vollständige Codebeispiele: