Anzeigen von Suchergebnissen auf der Karte

In diesem Artikel erfahren Sie, wie Sie nach interessanten Orten suchen und die Suchergebnisse auf der Karte anzeigen.

Es gibt zwei Möglichkeiten, nach einem interessanten Standort zu suchen. Eine Möglichkeit besteht darin, das TypeScript REST SDK zu verwenden, @azure-rest/maps-search , um eine Suchanforderung zu stellen. Die andere Möglichkeit besteht darin, eine Suchanforderung an die Azure Maps Fuzzy-Such-API über die Fetch-API zu senden. Beide Ansätze werden in diesem Artikel beschrieben.

Erstellen einer Suchanforderung über DAS REST SDK

import * as atlas from "azure-maps-control";
import MapsSearch from "@azure-rest/maps-search";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client ID>",
      aadAppId: "<Your Azure Active Directory Client ID>",
      aadTenant: "<Your Azure Active Directory Tenant ID>"
    }
  });

  map.events.add("load", async () => {
    // Use the access token from the map and create an object that implements the TokenCredential interface.
    const credential = {
      getToken: () => {
        return {
          token: map.authentication.getToken()
        };
      }
    };

    // Create a Search client.
    const client = MapsSearch(credential, "<Your Azure Maps Client ID>");

    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Search for gas stations near Seattle.
    const response = await client.path("/search/fuzzy/{format}", "json").get({
      queryParameters: {
        query: "gasoline station",
        lat: 47.6101,
        lon: -122.34255
      }
    });

    // Arrays to store bounds for results.
    const bounds = [];

    // Convert the response into Feature and add it to the data source.
    const searchPins = response.body.results.map((result) => {
      const position = [result.position.lon, result.position.lat];
      bounds.push(position);
      return new atlas.data.Feature(new atlas.data.Point(position), {
        position: result.position.lat + ", " + result.position.lon
      });
    });

     // Add the pins to the data source.
    datasource.add(searchPins);

    // Set the camera to the bounds of the pins
    map.setCamera({
      bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
      padding: 40
    });
  });
};

document.body.onload = onload;

Im vorherigen Codebeispiel erstellt der erste Block ein Kartenobjekt und legt den Authentifizierungsmechanismus so fest, dass Microsoft Entra ID verwendet wird. Weitere Informationen finden Sie unter Erstellen einer Karte.

Der zweite Codeblock erstellt ein Objekt, das die TokenCredential-Schnittstelle implementiert, um HTTP-Anforderungen bei Azure Maps mit dem Zugriffstoken zu authentifizieren. Anschließend wird das Anmeldeinformationsobjekt an MapsSearch übergeben und eine Instanz des Clients erstellt.

Der dritte Codeblock erstellt ein Datenquellenobjekt mithilfe der DataSource-Klasse und fügt ihr Suchergebnisse hinzu. Eine Symbolebene verwendet Text oder Symbole, um punktbasierte Daten, die in die DataSource eingeschlossen sind, als Symbole auf der Karte zu rendern. Anschließend wird eine Symbolebene erstellt. Die Datenquelle wird der Symbolebene hinzugefügt, die dann der Karte hinzugefügt wird.

Der vierte Codeblock sendet eine GET-Anforderung im MapsSearch-Client . Es ermöglicht Ihnen, eine Freiform-Textsuche über die Get Search Fuzzy REST API durchzuführen, um nach Points of Interest zu suchen. GET-Anfragen an die Fuzzy-Suche-API können jede beliebige Kombination unscharfer Eingaben verarbeiten. Die Antwort wird dann in Featureobjekte konvertiert und der Datenquelle hinzugefügt, was automatisch dazu führt, dass die Daten über die Symbolebene auf der Karte gerendert werden.

Der letzte Codeblock passt die Kameragrenzen für die Karte mithilfe der SetCamera-Eigenschaft der Karte an.

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

Erstellen einer Suchanforderung über fetch-API

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client ID>",
      aadAppId: "<Your Azure Active Directory Client ID>",
      aadTenant: "<Your Azure Active Directory Tenant ID>"
    }
  });

  map.events.add("load", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Send a request to Azure Maps Search API
    let url = "https://atlas.microsoft.com/search/fuzzy/json?";
    url += "&api-version=1";
    url += "&query=gasoline%20station";
    url += "&lat=47.6101";
    url += "&lon=-122.34255";
    url += "&radius=100000";

    // Parse the API response and create a pin on the map for each result
    fetch(url, {
      headers: {
        Authorization: "Bearer " + map.authentication.getToken(),
        "x-ms-client-id": "<Your Azure Maps Client ID>"
      }
    })
      .then((response) => response.json())
      .then((response) => {
        // Arrays to store bounds for results.
        const bounds = [];

        // Convert the response into Feature and add it to the data source.
        const searchPins = response.results.map((result) => {
          const position = [result.position.lon, result.position.lat];
          bounds.push(position);
          return new atlas.data.Feature(new atlas.data.Point(position), {
            position: result.position.lat + ", " + result.position.lon
          });
        });

        // Add the pins to the data source.
        datasource.add(searchPins);

        // Set the camera to the bounds of the pins
        map.setCamera({
          bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
          padding: 40
        });
      });
  });
};

document.body.onload = onload;

Im vorherigen Codebeispiel erstellt der erste Codeblock ein Kartenobjekt. Er legt den Authentifizierungsmechanismus für die Verwendung der Microsoft Entra-ID fest. Weitere Informationen finden Sie unter Erstellen einer Karte.

Der zweite Codeblock erstellt ein Datenquellenobjekt mithilfe der DataSource-Klasse und fügt ihr Suchergebnisse hinzu. Eine Symbolebene verwendet Text oder Symbole, um punktbasierte Daten, die in die DataSource eingeschlossen sind, als Symbole auf der Karte zu rendern. Anschließend wird eine Symbolebene erstellt. Die Datenquelle wird der Symbolebene hinzugefügt, die dann der Karte hinzugefügt wird.

Der dritte Codeblock erstellt eine URL, an die eine Suchanforderung gestellt werden soll.

Der vierte Codeblock verwendet die Fetch-API. Die Fetch-API wird verwendet, um eine Anforderung an die Azure Maps Fuzzy-Such-API zu senden, um nach interessanten Punkten zu suchen. Die Fuzzy-Such-API kann jede Kombination aus Fuzzyeingaben verarbeiten. Anschließend behandelt und analysiert sie die Suchantwort und fügt die Ergebnis-Pins zum SearchPins-Array hinzu.

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

Die Suchanforderung, die Datenquelle, die Symbolebene und die Kameragrenzen werden innerhalb des Ereignislisteners der Karte festgelegt, um sicherzustellen, dass die Ergebnisse angezeigt werden, nachdem die Karte vollständig geladen wurde.

Die folgende Abbildung zeigt die Ergebnisse der beiden Codebeispiele.

Nächste Schritte

Weitere Informationen zur Fuzzy-Suche:

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

Die folgenden Artikel enthalten vollständige Codebeispiele: