Abrufen von Informationen von einer Koordinate

In diesem Artikel wird gezeigt, wie Sie eine umgekehrte Adresssuche durchführen, die die Adresse eines ausgewählten Popup-Standorts angibt.

Es gibt zwei Möglichkeiten, eine Rückwärtssuche nach Adressen durchzuführen. Eine Möglichkeit besteht darin, die Reverse Address Search-API über das TypeScript REST SDK @azure-rest/maps-search abzufragen. Die andere Möglichkeit besteht darin, die Fetch-API zu verwenden, um eine Anforderung an die Reverse Address Search-API zu senden, um eine Adresse zu finden. Beide Ansätze werden in diesem Artikel beschrieben.

Durchführen einer Umgekehrten 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>");

    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      const position = [e.position[1], e.position[0]];

      // Execute the reverse address search query and open a popup once a response is received
      const response = await client.path("/search/address/reverse/{format}", "json").get({
        queryParameters: { query: position }
      });

      // Get address data from response
      const data = response.body.addresses;

      // Construct the popup
      var popupContent = document.createElement("div");
      popupContent.classList.add("popup-content");
      popupContent.innerHTML = data.length !== 0 ? data[0].address.freeformAddress : "No address for that location!";
      popup.setOptions({
        position: e.position,
        content: popupContent
      });

      // Render the popup on the map
      popup.open(map);
    });
  });
};

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 aktualisiert den Stil des Mauszeigers auf einen Zeiger und erstellt ein Popupobjekt. Weitere Informationen finden Sie unter Hinzufügen eines Popups auf der Karte.

Der vierte Codeblock fügt einen Mausklickereignislistener hinzu. Beim Auslösen wird eine Suchabfrage mit den Koordinaten des ausgewählten Punkts erstellt. Anschließend wird eine GET-Anforderung ausgeführt, um die Get-Suchadresse-Reverse-API nach der Adresse der Koordinaten abzufragen.

Der fünfte Codeblock richtet den HTML-Popupinhalt ein, um die Antwortadresse für die ausgewählte Koordinatenposition anzuzeigen.

Die Änderung des Cursors, das Popupobjekt und das click-Ereignis werden jeweils im Ladeereignislistener der Karte erstellt. Diese Codestruktur stellt sicher, dass die Karte vollständig geladen ist, bevor die Koordinaten abgerufen werden.

Eine Rückwärtssuche über die Fetch-API durchführen

Wählen Sie einen Ort auf der Karte aus, um eine umgekehrte Geocode-Anforderung für diesen Standort mithilfe von Fetch zu erstellen.

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", async () => {
    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      //Send a request to Azure Maps reverse address search API
      let url = "https://atlas.microsoft.com/search/address/reverse/json?";
      url += "&api-version=1.0";
      url += "&query=" + e.position[1] + "," + e.position[0];

      // Process request
      fetch(url, {
        headers: {
          Authorization: "Bearer " + map.authentication.getToken(),
          "x-ms-client-id": "<Your Azure Maps Client ID>"
        }
      })
        .then((response) => response.json())
        .then((response) => {
          const popupContent = document.createElement("div");
          popupContent.classList.add("popup-content");
          const address = response["addresses"];
          popupContent.innerHTML =
            address.length !== 0 ? address[0]["address"]["freeformAddress"] : "No address for that location!";
          popup.setOptions({
            position: e.position,
            content: popupContent
          });
          // render the popup on the map
          popup.open(map);
        });
    });
  });
};

document.body.onload = onload;

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

Der zweite Codeblock ändert das Aussehen des Mauszeigers in einen Zeiger. Es instanziiert ein Popupobjekt . Weitere Informationen finden Sie unter Hinzufügen eines Popups auf der Karte.

Der dritte Codeblock fügt einen Ereignislistener für Mausklicks hinzu. Wenn Sie mit der Maustaste klicken, wird die Fetch-API verwendet, um die Azure Maps Reverse Address Search-API für die ausgewählte Koordinatenadresse abzufragen. Bei einer erfolgreichen Antwort sammelt sie die Adresse für den ausgewählten Speicherort. Er definiert den Popupinhalt und die Position mithilfe der setOptions-Funktion der Popupklasse.

Die Änderung des Cursors, das Popupobjekt und das click-Ereignis werden jeweils im Ladeereignislistener der Karte erstellt. Diese Codestruktur stellt sicher, dass die Karte vollständig geladen ist, bevor die Koordinateninformationen abgerufen werden.

Die folgende Abbildung zeigt die Ergebnisse der beiden Codebeispiele.

Nächste Schritte

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

Die folgenden Artikel enthalten vollständige Codebeispiele: