Ottenere informazioni su una coordinata

Articolo
10/18/2023

Questo articolo illustra come eseguire una ricerca di indirizzi inversa che mostra l'indirizzo di una posizione popup selezionata.

Esistono due modi per eseguire una ricerca di indirizzi inversa. Un modo consiste nell'eseguire una query sull'API Ricerca indirizzi inversa tramite TypeScript REST SDK @azure-rest/maps-search. L'altro modo consiste nell'usare l'API Fetch per effettuare una richiesta all'API Ricerca indirizzi inversa per trovare un indirizzo. Entrambi gli approcci sono descritti in questo articolo.

Effettuare una richiesta di ricerca inversa tramite 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;

Nell'esempio di codice precedente il primo blocco costruisce un oggetto map e imposta il meccanismo di autenticazione per l'uso dell'ID Entra di Microsoft. Per altre informazioni, vedere Creare una mappa.

Il secondo blocco di codice crea un oggetto che implementa l'interfaccia TokenCredential per autenticare le richieste HTTP a Mappe di Azure con il token di accesso. Passa quindi l'oggetto credenziale a Mappe Search e crea un'istanza del client.

Il terzo blocco di codice aggiorna lo stile del cursore del mouse impostando un puntatore e crea un oggetto popup. Per altre informazioni, vedere Aggiungere un popup sulla mappa.

Il quarto blocco di codice aggiunge un listener di eventi per un clic del mouse. Quando viene attivata, crea una query di ricerca con le coordinate del punto selezionato. Esegue quindi una richiesta GET per eseguire una query sull'API Get Search Address Reverse per l'indirizzo delle coordinate.

Il quinto blocco di codice configura il contenuto popup HTML per visualizzare l'indirizzo di risposta per la posizione della coordinata selezionata.

La modifica del cursore, l'oggetto popup e l'evento click vengono tutti creati nel listener di eventi di caricamento della mappa. Questa struttura del codice assicura il caricamento completo della mappa prima del recupero delle informazioni sulle coordinate.

Effettuare una richiesta di ricerca inversa con l'API di recupero

Selezionare una posizione sulla mappa per effettuare una richiesta di geocodifica inversa per tale posizione usando il recupero.

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;

Nell'esempio di codice precedente il primo blocco di codice costruisce un oggetto mappa e imposta il meccanismo di autenticazione per l'uso dell'ID Microsoft Entra. Per istruzioni, vedere Creare una mappa .

Il secondo blocco di codice aggiorna lo stile del cursore del mouse impostando un puntatore. Crea un'istanza di un oggetto popup. Per altre informazioni, vedere Aggiungere un popup sulla mappa.

Il terzo blocco di codice aggiunge un listener di eventi per i clic del mouse. Quando si fa clic con il mouse, usa l'API Fetch per eseguire una query sull'API ricerca indirizzi inversa Mappe di Azure per l'indirizzo delle coordinate selezionate. Per una risposta con esito positivo, raccoglie l'indirizzo per la posizione selezionata. Definisce la posizione e il contenuto popup usando la funzione setOptions della classe popup.

L'immagine seguente è uno screenshot che mostra i risultati dei due esempi di codice.