Obtenir des informations à partir d’une coordonnée

Article
07/20/2023

Cet article explique comment effectuer une recherche d’adresse inversée qui affiche l’adresse d’un emplacement d’une fenêtre contextuelle sélectionné.

Deux méthodes permettent d’effectuer une recherche d’adresses inversée. L’une des façons consiste à interroger l’API Recherche d’adresse inversée via le kit de développement logiciel (SDK) REST TypeScript @azure-rest/maps-search. La seconde consiste à utiliser l’API Récupération (fetch) pour demander à l’API Recherche d’adresses inversée de rechercher une adresse. Les deux approches sont décrites dans cet article.

Effectuer une requête de recherche inversée via le SDK REST

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;

Dans l’exemple de code précédent, le premier bloc construit un objet de carte et définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Pour plus d’informations, voir Créer une carte.

Le deuxième bloc de code crée un objet qui implémente l’interface TokenCredential pour authentifier les requêtes HTTP auprès d’Azure Maps avec le jeton d’accès. Il transmet ensuite l’objet d’informations d’identification à MapsSearch et crée une instance du client.

Le troisième bloc de code change le style du curseur de la souris en pointeur et crée un objet fenêtre contextuelle. Pour plus d’informations, consultez Ajouter une fenêtre contextuelle sur la carte.

Le quatrième bloc de code ajoute un détecteur d’événements clic de souris. Lorsqu'il est déclenché, il crée une requête de recherche avec les coordonnées du point sélectionné. Il effectue ensuite une requête GET pour interroger l’API Obtenir des adresses de recherche inversée et obtenir l’adresse des coordonnées.

Le cinquième bloc de code définit le contenu de la fenêtre contextuelle HTML pour afficher l’adresse de réponse correspondant à la position des coordonnées sélectionnée.

Les modifications du curseur, de l’objet contextuel et de l’événement click sont toutes créées dans le détecteur d’événements de chargement de la carte. Cette structure de code garantit le chargement complet de la carte avant de récupérer les informations de coordonnées.

Requête de recherche inversée via l'API de récupération

Sélectionnez un emplacement sur la carte pour effectuer une requête de géocode inversé pour cet emplacement à l'aide de Fetch.

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;

Dans l’exemple de code précédent, le premier bloc de code construit un objet de carte et définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Vous pouvez consulter la section Créer une carte pour obtenir des instructions.

Le deuxième bloc de code modifie en pointeur le style du curseur de la souris. Il instancie un objet de fenêtre contextuelle. Pour plus d’informations, consultez Ajouter une fenêtre contextuelle sur la carte.

Le troisième bloc de code ajoute un détecteur d’événements pour les clics de souris. À la suite d’un clic de souris, il utilise l’API Fetch pour interroger l’API Azure Maps Recherche d’adresse inversée et obtenir l’adresse des coordonnées sélectionnées. Pour une réponse correcte, il collecte l’adresse de l’emplacement sélectionné. Il définit le contenu et la position de la fenêtre contextuelle à l’aide de la fonction setOptions de la classe de fenêtre contextuelle.

L’image suivante est une capture d’écran montrant les résultats des deux exemples de code.