Pokaż wyniki wyszukiwania na mapie

Artykuł
10/18/2023

W tym artykule pokazano, jak wyszukiwać interesujące lokalizacje i wyświetlać wyniki wyszukiwania na mapie.

Istnieją dwa sposoby wyszukiwania interesującej lokalizacji. Jednym ze sposobów jest użycie zestawu SDK REST języka TypeScript, @azure-rest/maps-search w celu utworzenia żądania wyszukiwania. Innym sposobem jest utworzenie żądania wyszukiwania do interfejsu API wyszukiwania rozmytego Mapy za pomocą interfejsu API pobierania. Oba podejścia zostały opisane w tym artykule.

Wysyłanie żądania wyszukiwania za pomocą zestawu 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;

W poprzednim przykładzie kodu pierwszy blok tworzy obiekt mapy i ustawia mechanizm uwierzytelniania na użycie identyfikatora Entra firmy Microsoft. Aby uzyskać więcej informacji, zobacz Tworzenie mapy.

Drugi blok kodu tworzy obiekt, który implementuje interfejs TokenCredential w celu uwierzytelniania żądań HTTP na platformie Azure Mapy przy użyciu tokenu dostępu. Następnie przekazuje obiekt poświadczeń do Mapy Search i tworzy wystąpienie klienta.

Trzeci blok kodu tworzy obiekt źródła danych przy użyciu klasy DataSource i dodaje do niego wyniki wyszukiwania. Warstwa symboli używa tekstu lub ikon do renderowania danych opartych na punkcie w źródle danych jako symboli na mapie. Następnie zostanie utworzona warstwa symboli. Źródło danych jest dodawane do warstwy symboli, która jest następnie dodawana do mapy.

Czwarty blok kodu wysyła żądanie GET w kliencie Mapy Search. Umożliwia ona wykonywanie wolnego wyszukiwania tekstu w postaci za pośrednictwem interfejsu API rest wyszukiwania rozmytego w celu wyszukania punktu orientacyjnego. Żądania do interfejsu API rozmytego wyszukiwania mogą obsługiwać dowolną kombinację rozmytych danych wejściowych. Odpowiedź jest następnie konwertowana na obiekty funkcji i dodawana do źródła danych, co powoduje automatyczne renderowanie danych na mapie za pośrednictwem warstwy symboli.

Ostatni blok kodu dostosowuje granice aparatu dla mapy przy użyciu właściwości mapowania Aparat.

Żądanie wyszukiwania, źródło danych, warstwa symboli i granice aparatu znajdują się wewnątrz odbiornika zdarzeń mapy. Chcemy upewnić się, że wyniki są wyświetlane po pełnym załadowaniu mapy.

Wysyłanie żądania wyszukiwania za pośrednictwem interfejsu API pobierania

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;

W poprzednim przykładzie kodu pierwszy blok kodu tworzy obiekt mapy. Ustawia mechanizm uwierzytelniania na użycie identyfikatora Entra firmy Microsoft. Aby uzyskać więcej informacji, zobacz Tworzenie mapy.

Drugi blok kodu tworzy obiekt źródła danych przy użyciu klasy DataSource i dodaje do niego wyniki wyszukiwania. Warstwa symboli używa tekstu lub ikon do renderowania danych opartych na punkcie w źródle danych jako symboli na mapie. Następnie zostanie utworzona warstwa symboli. Źródło danych jest dodawane do warstwy symboli, która jest następnie dodawana do mapy.

Trzeci blok kodu tworzy adres URL w celu utworzenia żądania wyszukiwania.

Czwarty blok kodu używa interfejsu API pobierania. Interfejs API pobierania służy do tworzenia żądania do interfejsu API wyszukiwania rozmytego platformy Azure Mapy w celu wyszukiwania punktów orientacyjnych. Interfejs API wyszukiwania rozmytego może obsługiwać dowolną kombinację rozmytych danych wejściowych. Następnie obsługuje i analizuje odpowiedź wyszukiwania i dodaje pinezki wyników do tablicy searchPins.

Ostatni blok kodu tworzy obiekt BoundingBox . Używa tablicy wyników, a następnie dostosowuje granice aparatu dla mapy przy użyciu zestawu mapy Aparat. Następnie renderuje pinezki wyników.

Żądanie wyszukiwania, źródło danych, warstwa symboli i granice aparatu są ustawiane w odbiorniku zdarzeń mapy, aby upewnić się, że wyniki są wyświetlane po pełnym załadowaniu mapy.

Na poniższej ilustracji przedstawiono zrzut ekranu przedstawiający wyniki dwóch przykładów kodu.