Pokaż wyniki wyszukiwania na mapie

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 usługi Azure Maps za pomocą interfejsu Fuzzy search API w usłudze API Fetch. 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 w usłudze Azure Maps przy użyciu tokenu dostępu. Następnie przekazuje obiekt poświadczeń do MapsSearch 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 MapsSearch . Umożliwia wykonywanie wyszukiwania pełnotekstowego za pośrednictwem interfejsu API REST rozmytego wyszukiwania, aby wyszukać punkty zainteresowania. Żą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 setCamera mapy.

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

Złożenie żądania wyszukiwania za pomocą Fetch API

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 Fetch API. Interfejs Fetch API służy do utworzenia żądania do interfejsu API wyszukiwania przybliżonego usługi Azure Maps w celu wyszukiwania punktów zainteresowania. Interfejs API wyszukiwania rozmytego może obsługiwać dowolną kombinację rozmytych danych wejściowych. Następnie obsługuje i analizuje odpowiedź wyszukiwania, dodając wyniki do tablicy wyników wyszukiwania.

Ostatni blok kodu tworzy obiekt BoundingBox . Używa tablicy wyników, a następnie dostosowuje granice kamery dla mapy przy użyciu funkcji setCamera mapy. Następnie renderuje znaczniki wyników.

Żądanie wyszukiwania, źródło danych, warstwa symboli i granice widoku kamery są ustawiane w odbiorniku zdarzeń mapy, aby zapewnić, ż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.

Następne kroki

Dowiedz się więcej o wyszukiwaniu rozmytym:

Dowiedz się więcej o klasach i metodach używanych w tym artykule:

Zobacz następujące artykuły, aby zapoznać się z pełnymi przykładami kodu: