Visa sökresultat på kartan

Den här artikeln visar hur du söker efter intressanta platser och visar sökresultaten på kartan.

Det finns två sätt att söka efter en plats av intresse. Ett sätt är att använda TypeScript REST SDK, @azure-rest/maps-search för att göra en sökbegäran. Det andra sättet är att göra en sökbegäran till Azure Maps Fuzzy-sök-API:et via Fetch-API:et. Båda tillvägagångssätten beskrivs i denna artikel.

Gör en sökbegäran via REST SDK

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;

I det tidigare kodexemplet konstruerar det första blocket ett kartobjekt och ställer in autentiseringsmekanismen för att använda Microsoft Entra ID. För mer information, se Create a map.

Den andra kodblocket skapar ett objekt som implementerar gränssnittet TokenCredential för att autentisera HTTP-förfrågningar till Azure Maps med hjälp av åtkomsttoken. Sedan överförs behörighetsobjektet till MapsSearch och en instans av klienten skapas.

Det tredje kodblocket skapar ett datakällobjekt med hjälp av klassen DataSource och lägger till sökresultat i det. Ett symbolskikt använder text eller ikoner för att återge punktbaserade data som omsluts i DataSource som symboler på kartan. Därefter skapas ett symbolskikt. Datakällan läggs till i symbolskiktet, som sedan läggs till på kartan.

Det fjärde kodblocket gör en GET-begäran i MapsSearch-klienten . Det gör att du kan utföra en textsökning i fritt formulär via Get Search Fuzzy REST API för att söka efter intressanta platser. Hämta begäranden till Search Fuzzy-API:et kan hantera valfri kombination av fuzzy-indata. Svaret konverteras sedan till Feature objekt och läggs till i datakällan, vilket automatiskt resulterar i att data återges på kartan via symbolskiktet.

Det sista kodblocket justerar kamerans gränser för kartan med hjälp av kartans setCamera egenskap.

Sökbegäran, datakällan, symbolskiktet och kameragränserna finns i kartans händelseavlyssnare . Vi vill se till att resultaten visas när kartan har lästs in helt.

Gör en sökbegäran via 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;

I föregående kodexempel konstruerar det första kodblocket ett kartobjekt. Den anger autentiseringsmekanismen för att använda Microsoft Entra ID. För mer information, se Create a map.

Det andra kodblocket skapar ett datakällobjekt med hjälp av klassen DataSource och lägger till sökresultat i det. Ett symbolskikt använder text eller ikoner för att återge punktbaserade data som omsluts i DataSource som symboler på kartan. Därefter skapas ett symbolskikt. Datakällan läggs till i symbolskiktet, som sedan läggs till på kartan.

Det tredje kodblocket skapar en URL för att göra en sökbegäran till.

Det fjärde kodblocket använder Fetch API. Fetch-API:et används för att göra en begäran till Azure Maps Fuzzy-sök-API:et för att söka efter intressanta platser. API:et för fuzzy-sökning kan hantera valfri kombination av fuzzy-indata. Den hanterar och parsar sedan söksvaret och lägger till resultatstiften i matrisen searchPins.

Det sista kodblocket skapar ett BoundingBox-objekt . Den använder matrisen med resultat och justerar sedan kameragränserna för kartan med hjälp av kartans setCamera. Den återger sedan resultatstiften.

Sökbegäran, datakällan, symbolskiktet och kameragränserna anges i kartans händelseavlyssnare för att säkerställa att resultaten visas när kartan har lästs in helt.

Den följande bilden är en skärmdump som visar resultaten av de två kodexemplen.

Nästa steg

Läs mer om Fuzzy Search:

Läs mer om de klasser och metoder som används i den här artikeln:

Se följande artiklar för fullständiga kodexempel: