Hämta information från en koordinat

Artikel
10/18/2023

Den här artikeln visar hur du gör en sökning med omvänd adress som visar adressen till en vald popup-plats.

Det finns två sätt att göra en sökning med omvänd adress. Ett sätt är att fråga API:et för omvänd adresssökning via TypeScript REST SDK @azure-rest/maps-search. Det andra sättet är att använda Fetch API för att göra en begäran till API:et för omvänd adresssökning för att hitta en adress. Båda metoderna beskrivs i den här artikeln.

Skicka en begäran om omvänd sökning via 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;

I föregående kodexempel konstruerar det första blocket ett kartobjekt och anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Mer information finns i Skapa en karta.

Det andra kodblocket skapar ett objekt som implementerar TokenCredential-gränssnittet för att autentisera HTTP-begäranden till Azure Kartor med åtkomsttoken. Det skickar sedan autentiseringsobjektet till Kartor Search och skapar en instans av klienten.

Det tredje kodblocket uppdaterar markörens format till en pekare och skapar ett popup-objekt . Mer information finns i Lägga till ett popup-fönster på kartan.

Det fjärde kodblocket lägger till en snabbhändelselyssnare. När den utlöses skapar den en sökfråga med koordinaterna för den valda punkten. Sedan skickas en GET-begäran för att fråga api:et Hämta sökadress omvänd för koordinaternas adress.

Det femte kodblocket konfigurerar HTML-popup-innehållet för att visa svarsadressen för den valda koordinatpositionen.

Markörens, popup-objektets och click händelsens ändring skapas i kartans lyssnare för belastningshändelser. Den här kodstrukturen säkerställer att kartan läses in fullt ut innan du hämtar koordinatinformationen.

Gör en begäran om omvänd sökning via Fetch API

Välj en plats på kartan för att göra en omvänd geocode-begäran för den platsen med hämtning.

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;

I föregående kodexempel konstruerar det första kodblocket ett mappningsobjekt och anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Du kan se Skapa en karta för instruktioner.

Det andra kodblocket uppdaterar musmarkörens format till en pekare. Det instansierar ett popup-objekt . Mer information finns i Lägga till ett popup-fönster på kartan.

Det tredje kodblocket lägger till en händelselyssnare för musklickningar. Vid ett musklick använder det hämtnings-API:et för att fråga Azure Kartor API för omvänd adresssökning efter den valda koordinatadressen. För ett lyckat svar samlar den in adressen för den valda platsen. Den definierar popup-innehållet och positionen med hjälp av funktionen setOptions i popup-klassen.

Markörens, popup-objektets och click händelsens ändring skapas i kartans lyssnare för belastningshändelser. Den här kodstrukturen säkerställer att kartan läses in helt innan du hämtar koordinatinformationen.

Följande bild är en skärmbild som visar resultatet av de två kodexemplen.