Mostrar los resultados de la búsqueda en el mapa

2025-06-23

En este artículo se muestra cómo buscar la ubicación de interés y mostrar los resultados de la búsqueda en el mapa.

Hay dos formas de buscar una ubicación de interés. Una forma es usar el SDK de REST de TypeScript, @azure-rest/maps-search para realizar una solicitud de búsqueda. La otra forma es realizar una solicitud de búsqueda a la API de búsqueda aproximada de Azure Maps a través de la API de captura. Ambos enfoques se describen en este artículo.

Realizar una solicitud de búsqueda a través del SDK de 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;

En el ejemplo de código anterior, el primer bloque construye un objeto de mapa y establece el mecanismo de autenticación para usar el identificador de Microsoft Entra. Para obtener más información, consulte Crear un mapa.

El segundo bloque de código crea un objeto que implementa la interfaz TokenCredential para autenticar solicitudes HTTP en Azure Maps con el token de acceso. A continuación, pasa el objeto de credencial a MapsSearch y crea una instancia del cliente.

El tercer bloque de código crea un objeto de origen de datos mediante la clase DataSource y le agrega los resultados de la búsqueda. Una capa de símbolos usa texto o iconos para representar datos basados en puntos encapsulados en dataSource como símbolos en el mapa. A continuación, se crea una capa de símbolos. La fuente de datos se agrega a la capa de símbolos, que luego se agrega al mapa.

El cuarto bloque de código realiza una solicitud GET en el cliente de MapsSearch . Le permite realizar una búsqueda de texto de forma libre a través de la API REST Get Search Fuzzy para buscar puntos de interés. Las solicitudes Get a la API Search Fuzzy pueden controlar cualquier combinación de entradas aproximadas. A continuación, la respuesta se convierte en objetos de entidad y se agrega a la fuente de datos, lo que da como resultado automáticamente que los datos se representen en el mapa a través de la capa de símbolos.

El último bloque de código ajusta los límites de la cámara para el mapa mediante la propiedad setCamera del mapa.

La solicitud de búsqueda, la fuente de datos, la capa de símbolos y los límites de la cámara se encuentran dentro del detector de eventos del mapa. Queremos asegurarnos de que los resultados se muestren después de que el mapa se cargue por completo.

Realizar una solicitud de búsqueda a través de la 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;

En el ejemplo de código anterior, el primer bloque de código construye un objeto de mapa. Establece el mecanismo de autenticación para usar el identificador de Microsoft Entra. Para obtener más información, consulte Crear un mapa.

El segundo bloque de código crea un objeto de origen de datos mediante la clase DataSource y le agrega los resultados de la búsqueda. Una capa de símbolos usa texto o iconos para representar datos basados en puntos encapsulados en dataSource como símbolos en el mapa. A continuación, se crea una capa de símbolos. La fuente de datos se agrega a la capa de símbolos, que luego se agrega al mapa.

El tercer bloque de código crea una dirección URL a la que realizar una solicitud de búsqueda.

El cuarto bloque de código usa la API Fetch. La API de recuperación se usa para realizar una solicitud a la API de búsqueda aproximada de Azure Maps para buscar los puntos de interés. La API de búsqueda aproximada puede manejar cualquier combinación de entradas aproximadas. A continuación, controla y analiza la respuesta de búsqueda y agrega los pines de resultados a la matriz searchPins.

El último bloque de código crea un objeto BoundingBox . Utiliza la matriz de resultados y, a continuación, ajusta los límites de la cámara para el mapa mediante el setCamera del mapa. A continuación, renderiza los pines de resultado.

La solicitud de búsqueda, la fuente de datos, la capa de símbolos y los límites de la cámara se establecen en el detector de eventos del mapa para garantizar que los resultados se muestren después de que el mapa se cargue por completo.

La siguiente imagen es una captura de pantalla que muestra los resultados de los dos ejemplos de código.