Mostrar resultados da pesquisa no mapa

Este artigo mostra como pesquisar o local de interesse e mostrar os resultados da pesquisa no mapa.

Existem duas maneiras de pesquisar um local de interesse. Uma maneira é usar o SDK REST do TypeScript, @azure-rest/maps-search para fazer uma solicitação de pesquisa. A outra maneira é fazer uma solicitação de pesquisa para a API de pesquisa difusa do Azure Mapas por meio da API de busca. Ambas as abordagens são descritas neste artigo.

Fazer uma solicitação de pesquisa 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>");

    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Search for gas stations near Seattle.
    const response = await client.path("/search/fuzzy/{format}", "json").get({
      queryParameters: {
        query: "gasoline station",
        lat: 47.6101,
        lon: -122.34255
      }
    });

    // Arrays to store bounds for results.
    const bounds = [];

    // Convert the response into Feature and add it to the data source.
    const searchPins = response.body.results.map((result) => {
      const position = [result.position.lon, result.position.lat];
      bounds.push(position);
      return new atlas.data.Feature(new atlas.data.Point(position), {
        position: result.position.lat + ", " + result.position.lon
      });
    });

     // Add the pins to the data source.
    datasource.add(searchPins);

    // Set the camera to the bounds of the pins
    map.setCamera({
      bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
      padding: 40
    });
  });
};

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 cria um objeto de fonte de dados usando a classe DataSource e adiciona resultados de pesquisa a ele. Uma camada de símbolo usa texto ou ícones para renderizar dados baseados em ponto envolvidos no DataSource como símbolos no mapa. Uma camada de símbolo é então criada. A fonte de dados é adicionada à camada de símbolo, que é então adicionada ao mapa.

O quarto bloco de código faz uma solicitação GET no cliente MapsSearch . Ele permite que você execute uma pesquisa de texto de forma livre por meio da API REST Get Search Fuzzy para pesquisar o ponto de interesse. As solicitações Get para a API Search Fuzzy podem lidar com qualquer combinação de entradas difusas. A resposta é então convertida em objetos Feature e adicionada à fonte de dados, o que resulta automaticamente na renderização dos dados no mapa por meio da camada de símbolo.

O último bloco de código ajusta os limites da câmera para o mapa usando a propriedade setCamera do Map.

A solicitação de pesquisa, a fonte de dados, a camada de símbolo e os limites da câmera estão dentro do ouvinte de eventos do mapa. Queremos garantir que os resultados sejam exibidos depois que o mapa for totalmente carregado.

Fazer uma solicitação de pesquisa por meio da API 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", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Send a request to Azure Maps Search API
    let url = "https://atlas.microsoft.com/search/fuzzy/json?";
    url += "&api-version=1";
    url += "&query=gasoline%20station";
    url += "&lat=47.6101";
    url += "&lon=-122.34255";
    url += "&radius=100000";

    // Parse the API response and create a pin on the map for each result
    fetch(url, {
      headers: {
        Authorization: "Bearer " + map.authentication.getToken(),
        "x-ms-client-id": "<Your Azure Maps Client ID>"
      }
    })
      .then((response) => response.json())
      .then((response) => {
        // Arrays to store bounds for results.
        const bounds = [];

        // Convert the response into Feature and add it to the data source.
        const searchPins = response.results.map((result) => {
          const position = [result.position.lon, result.position.lat];
          bounds.push(position);
          return new atlas.data.Feature(new atlas.data.Point(position), {
            position: result.position.lat + ", " + result.position.lon
          });
        });

        // Add the pins to the data source.
        datasource.add(searchPins);

        // Set the camera to the bounds of the pins
        map.setCamera({
          bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
          padding: 40
        });
      });
  });
};

document.body.onload = onload;

No exemplo de código anterior, o primeiro bloco de código constrói um objeto map. Ele 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 de fonte de dados usando a classe DataSource e adiciona resultados de pesquisa a ele. Uma camada de símbolo usa texto ou ícones para renderizar dados baseados em ponto envolvidos no DataSource como símbolos no mapa. Uma camada de símbolo é então criada. A fonte de dados é adicionada à camada de símbolo, que é então adicionada ao mapa.

O terceiro bloco de código cria um URL para fazer uma solicitação de pesquisa.

O quarto bloco de código usa a API Fetch. A API de Busca é usada para fazer uma solicitação à API de pesquisa difusa do Azure Mapas para pesquisar os pontos de interesse. A API de pesquisa difusa pode lidar com qualquer combinação de entradas difusas. Em seguida, ele manipula e analisa a resposta da pesquisa e adiciona os pinos de resultado à matriz searchPins.

O último bloco de código cria um objeto BoundingBox . Ele usa a matriz de resultados e, em seguida, ajusta os limites da câmera para o mapa usando o setCamera do mapa. Em seguida, ele renderiza os pinos de resultado.

A solicitação de pesquisa, a fonte de dados, a camada de símbolo e os limites da câmera são definidos no ouvinte de eventos do mapa para garantir que os resultados sejam exibidos após o mapa ser totalmente carregado.

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

Próximas etapas

Saiba mais sobre a Pesquisa Difusa:

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

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