Informatie ophalen uit een coördinaat

Artikel
10/18/2023

In dit artikel wordt beschreven hoe u een omgekeerde adreszoekopdracht maakt waarin het adres van een geselecteerde pop-uplocatie wordt weergegeven.

Er zijn twee manieren om een omgekeerde adreszoekopdracht te maken. Een manier is om een query uit te voeren op de REVERSE Address Search-API via de TypeScript REST SDK @azure-rest/maps-search. De andere manier is om de Fetch-API te gebruiken om een aanvraag naar de REVERSE Address Search-API te verzenden om een adres te vinden. Beide benaderingen worden beschreven in dit artikel.

Een aanvraag voor reverse search maken 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;

In het vorige codevoorbeeld maakt het eerste blok een kaartobject en stelt het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor meer informatie.

Het tweede codeblok maakt een object dat de TokenCredential-interface implementeert om HTTP-aanvragen te verifiëren bij Azure Kaarten met het toegangstoken. Vervolgens wordt het referentieobject doorgegeven aan Kaarten Search en wordt een exemplaar van de client gemaakt.

Het derde codeblok werkt de stijl van de muiscursor bij naar een aanwijzer en maakt een pop-upobject . Zie Een pop-up toevoegen op de kaart voor meer informatie.

Het vierde codeblok voegt een gebeurtenislistener met de muisklik toe. Wanneer deze wordt geactiveerd, wordt er een zoekquery gemaakt met de coördinaten van het geselecteerde punt. Vervolgens wordt er een GET-aanvraag ingediend om een query uit te voeren op de omgekeerde API voor het adres van de coördinaten.

Met het vijfde codeblok wordt de HTML-pop-upinhoud ingesteld om het antwoordadres voor de geselecteerde coördinaatpositie weer te geven.

De wijziging van de cursor, het pop-upobject en de click gebeurtenis worden allemaal gemaakt in de gebeurtenislistener voor het laden van de kaart. Deze codestructuur zorgt ervoor dat de kaart volledig wordt geladen voordat de coördinatengegevens worden opgehaald.

Een aanvraag voor reverse search maken via fetch-API

Selecteer een locatie op de kaart om een aanvraag voor omgekeerde geocode voor die locatie te maken met behulp van ophalen.

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;

In het vorige codevoorbeeld maakt het eerste codeblok een kaartobject en stelt het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor instructies.

Met het tweede codeblok wordt de stijl van de muiscursor bijgewerkt naar een aanwijzer. Er wordt een pop-upobject geïnstitueert . Zie Een pop-up toevoegen op de kaart voor meer informatie.

Het derde codeblok voegt een gebeurtenislistener toe voor muisklikken. Bij een muisklik wordt de Fetch-API gebruikt om een query uit te voeren op de Azure Kaarten Reverse Address Search-API voor het geselecteerde coördinatenadres. Voor een geslaagd antwoord wordt het adres voor de geselecteerde locatie verzameld. Hiermee wordt de pop-upinhoud en -positie gedefinieerd met behulp van de functie setOptions van de pop-upklasse.

De volgende afbeelding is een schermopname met de resultaten van de twee codevoorbeelden.