Obter informações de uma coordenada

Este artigo mostra como fazer uma pesquisa de endereço reverso que mostra o endereço de um local pop-up selecionado.

Há duas maneiras de fazer uma busca reversa de endereço. Uma maneira é consultar a API de Pesquisa de Endereço Inverso por meio do SDK REST do TypeScript @azure-rest/maps-search. A outra maneira é usar a API fetch para fazer uma solicitação à API de Pesquisa de Endereço Reverso para localizar um endereço. Ambas as abordagens são descritas neste artigo.

Fazer uma solicitação de pesquisa inversa por meio do 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;

No exemplo de código anterior, o primeiro bloco constrói um objeto de mapa e define o mecanismo de autenticação para usar a ID do Microsoft Entra. Para obter mais informações, consulte Criar um mapa.

O segundo bloco de código cria um objeto que implementa a interface TokenCredential para autenticar solicitações HTTP no Azure Mapas com o token de acesso. Em seguida, ele passa o objeto de credencial para o MapsSearch e cria uma instância do cliente.

O terceiro bloco de código atualiza o estilo do cursor do mouse para um ponteiro e cria um objeto pop-up . Para obter mais informações, consulte Adicionar um pop-up no mapa.

O quarto bloco de código adiciona um ouvinte de eventos para cliques do mouse. Quando disparado, ele cria uma consulta de pesquisa com as coordenadas do ponto selecionado. Em seguida, ele faz uma solicitação GET para consultar a API de Pesquisa de Endereço Reversa Get Search Address Reverse API para obter o endereço das coordenadas.

O quinto bloco de código configura o conteúdo pop-up HTML para exibir o endereço de resposta da posição de coordenada selecionada.

A alteração do cursor, o objeto pop-up e o evento click são criados no ouvinte de eventos de carga do mapa. Essa estrutura de código garante que o mapa seja totalmente carregado antes de recuperar as informações de coordenadas.

Fazer uma solicitação de pesquisa inversa por meio da API fetch

Selecione um local no mapa para fazer uma solicitação de geocódigo reverso para esse local usando 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;

No exemplo de código anterior, o primeiro bloco de código constrói um objeto de mapa e define o mecanismo de autenticação para usar a ID do Microsoft Entra. Você pode ver Criar um mapa para obter instruções.

O segundo bloco de código atualiza o estilo do cursor do mouse para um ponteiro. Ele instancia um objeto pop-up. Para obter mais informações, consulte Adicionar um pop-up no mapa.

O terceiro bloco de código adiciona um ouvinte de eventos para cliques do mouse. Após um clique do mouse, ele usa a API fetch para consultar a API de Pesquisa de Endereço Reverso do Azure Mapas para obter o endereço de coordenadas selecionado. Para obter uma resposta bem-sucedida, ele coleta o endereço do local selecionado. Ele define o conteúdo pop-up e a posição usando a função setOptions da classe pop-up.

A alteração do cursor, o objeto pop-up e o evento click são criados no ouvinte de eventos de carga do mapa. Essa estrutura de código garante que o mapa seja totalmente carregado antes de recuperar as informações de coordenadas.

A imagem a seguir é uma captura de tela mostrando os resultados dos dois exemplos de código.

Próximas etapas

Saiba mais sobre as classes e métodos usados neste artigo:

Consulte os seguintes artigos para obter exemplos de código completo: