你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在地图上显示搜索结果

本文将介绍如何搜索感兴趣位置并在地图上显示搜索结果。

有两种方法可以搜索感兴趣的位置。一种方法是使用 TypeScript REST SDK @azure-rest/maps-search 发出搜索请求。另一种方法是通过 Fetch API 向 Azure Maps 模糊搜索 API 发出搜索请求。本文介绍了这两种方法。

通过 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;

在前面的代码示例中，第一个块构造一个 map 对象，并将身份验证机制设置为使用 Microsoft Entra ID。有关更多信息，请参阅创建地图。

第二个代码块创建一个对象，该对象实现 TokenCredential 接口，以使用访问令牌对向 Azure Maps 发出的 HTTP 请求进行身份验证。然后，它将凭证对象传递给 MapsSearch 并创建客户端的实例。

第三个代码块使用 DataSource 类创建数据源对象，并向其添加搜索结果。符号层使用文本或图标将 DataSource 中包装的基于点的数据呈现为地图上的符号。然后创建一个元件图层。数据源将添加到符号图层，然后添加到地图中。

第四个代码块在 MapsSearch 客户端中发出 GET 请求。它允许您通过 Get Search Fuzzy REST API 执行自由格式的文本搜索，以搜索目标点。对搜索模糊 API 的 Get 请求可以处理模糊输入的任意组合。然后，响应将转换为 Feature 对象并添加到数据源中，这会自动导致数据通过元件层呈现在地图上。

最后一个代码块使用 Map 的 setCamera 属性调整地图的相机边界。

搜索请求、数据源、元件图层和相机边界位于地图的事件侦听器内。我们希望确保在地图完全加载后显示结果。

通过 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;

在前面的代码示例中，第一个代码块构造一个 map 对象。它将身份验证机制设置为使用 Microsoft Entra ID。有关更多信息，请参阅创建地图。

第二个代码块使用 DataSource 类创建数据源对象，并向其添加搜索结果。符号层使用文本或图标将 DataSource 中包装的基于点的数据呈现为地图上的符号。然后创建一个元件图层。数据源将添加到符号图层，然后添加到地图中。

第三个代码块创建一个 URL，用于向其发出搜索请求。

第四个代码块使用 Fetch API。 Fetch API 用于向 Azure Maps 模糊搜索 API 发出请求，以搜索兴趣点。模糊搜索 API 可以处理模糊输入的任意组合。然后，它会处理和分析搜索响应，并将结果图钉添加到 searchPins 数组中。

最后一个代码块创建一个 BoundingBox 对象。它使用结果数组，然后使用 Map 的 setCamera 调整地图的相机边界。然后，它渲染结果引脚。

搜索请求、数据源、元件图层和照相机边界在地图的事件侦听器中设置，以确保在地图完全加载后显示结果。

下图是显示两个代码示例结果的屏幕截图。