在地圖上顯示搜尋結果

發行項
03/18/2024

本文說明如何搜尋景點，並在地圖上顯示搜尋結果。

有兩種方式可搜尋景點。其中一種方式是使用 TypeScript REST SDK (@azure-rest/maps-search) 來進行搜尋要求。第二個方式是透過擷取 API 向 Azure 地圖服務模糊搜尋 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;

在上述程式碼範例中，第一個區塊會建構地圖物件，並將驗證機制設為使用 Microsoft Entra ID。如需詳細資訊，請參閱建立地圖。

第二個程式碼區塊會建立實作 TokenCredential 的物件，以使用存取權杖來驗證對 Azure 地圖服務的 HTTP 要求。然後，其會將認證物件傳遞至 MapsSearch，並建立用戶端的執行個體。

第三個程式碼區塊會使用 DataSource 類別來建立資料來源物件，以及搜尋其結果。符號層會使用文字或圖示，將包裝在 DataSource 中的點式資料轉譯為地圖上的符號。然後即會建立符號圖層。資料來源會新增至符號層，然後新增至地圖。

第四個程式碼區塊會在 MapsSearch 用戶端中提出 GET 要求。此方法可供透過取得搜尋模糊 Rest API 來執行自由格式文字搜尋，以搜尋景點。搜尋模糊 API 的取得要求可處理任何模糊輸入組合。然後，回應會轉換為 Feature 物件，並新增至資料來源，而使資料自動透過符號圖層呈現在地圖上。

程式碼最後一個區塊會使用地圖的 setCamera 屬性來為地圖調整觀景窗界限。

搜尋要求、資料來源、符號圖層和觀景窗界限位於地圖的事件接聽程式內。我們要確保在地圖完全載入後顯示結果。

透過擷取 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;

在上述程式碼範例中，程式碼的第一個區塊會建構地圖物件。其會將驗證機制設為 Microsoft Entra ID。如需詳細資訊，請參閱建立地圖。

第二個程式碼區塊會使用 DataSource 類別來建立資料來源物件，以及將搜尋結果新增至其中。符號層會使用文字或圖示，將包裝在 DataSource 中的點式資料轉譯為地圖上的符號。然後即會建立符號圖層。資料來源會新增至符號層，然後新增至地圖。

第三個程式碼區塊會建立可向其提出搜尋要求的 URL。

第四個程式碼區塊會使用擷取 API。擷取 API 會用於向 Azure 地圖服務模糊搜尋 API 提出要求，以搜尋景點。模糊搜尋 API 可以處理任何模糊輸入組合。然後，其會處理搜尋回應並加以剖析，並將結果釘選至 searchPins 陣列。

程式碼的最後一個區塊會建立 BoundingBox 物件。其會使用結果的陣列，然後使用地圖其 setCamera 來調整地圖的觀景窗界限。然後會轉譯結果圖釘。

路線查詢、資料來源、符號圖層及觀景窗界限會設定於地圖的事件接聽程式內，以確保在地圖完全載入後顯示結果。

下圖顯示兩個程式碼範例結果的螢幕擷取畫面。