從座標取得資訊

發行項
03/18/2024

本文會示範如何進行反向位址搜尋，顯示已選取之快顯位置本身的位址。

有兩種方式可以進行反向位址搜尋。其中一種方式是透過 TypeScript REST SDK @azure-rest/maps-search 查詢反向位址搜尋 API。另一種方式，則是使用擷取 API 向反向位址搜尋 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>");

    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      const position = [e.position[1], e.position[0]];

      // Execute the reverse address search query and open a popup once a response is received
      const response = await client.path("/search/address/reverse/{format}", "json").get({
        queryParameters: { query: position }
      });

      // Get address data from response
      const data = response.body.addresses;

      // Construct the popup
      var popupContent = document.createElement("div");
      popupContent.classList.add("popup-content");
      popupContent.innerHTML = data.length !== 0 ? data[0].address.freeformAddress : "No address for that location!";
      popup.setOptions({
        position: e.position,
        content: popupContent
      });

      // Render the popup on the map
      popup.open(map);
    });
  });
};

document.body.onload = onload;

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

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

第三個程式碼區塊會將滑鼠游標的樣式更新為指標，並建立快顯物件。如需詳細資訊，請參閱在地圖上新增快顯。

第四個程式碼區塊會新增滑鼠點擊的事件接聽程式。觸發時，會使用所選取的座標點來建立搜尋查詢。然後，其會發出 GET 要求，查詢取得搜尋位址反向 API 以取得座標位址。

第五個程式碼區塊會設定 HTML 快顯視窗內容，以顯示所選座標位置的回應位址。

指標、快顯物件和 click 事件的變更都會在地圖的載入事件接聽程式中建立。此程式碼結構可確保在擷取座標資訊之前完全載入地圖。

透過擷取 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", async () => {
    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      //Send a request to Azure Maps reverse address search API
      let url = "https://atlas.microsoft.com/search/address/reverse/json?";
      url += "&api-version=1.0";
      url += "&query=" + e.position[1] + "," + e.position[0];

      // Process request
      fetch(url, {
        headers: {
          Authorization: "Bearer " + map.authentication.getToken(),
          "x-ms-client-id": "<Your Azure Maps Client Id>"
        }
      })
        .then((response) => response.json())
        .then((response) => {
          const popupContent = document.createElement("div");
          popupContent.classList.add("popup-content");
          const address = response["addresses"];
          popupContent.innerHTML =
            address.length !== 0 ? address[0]["address"]["freeformAddress"] : "No address for that location!";
          popup.setOptions({
            position: e.position,
            content: popupContent
          });
          // render the popup on the map
          popup.open(map);
        });
    });
  });
};

document.body.onload = onload;

在上述程式碼範例中，第一個程式碼區塊會建構地圖物件，並將驗證機制設為使用 Microsoft Entra ID。如需相關指示，您可以查看建立地圖。

第二個程式碼區塊會將滑鼠游標的樣式更新為指標。其會將快顯視窗物件具現化。如需詳細資訊，請參閱在地圖上新增快顯。

第三個程式碼區塊會新增滑鼠點選的事件接聽程式。按一下滑鼠後，其會使用擷取 API，查詢 Azure 地圖服務反向位址搜尋 API 以取得選取的座標位址。若為成功的回應，則其即會收集所選位置的位址。其會使用快顯類別的 setOptions 函式來定義快顯內容和位置。

指標、快顯物件和 click 事件的變更都會在地圖的載入事件接聽程式中建立。此程式碼結構可確保在擷取座標資訊之前完全載入地圖。

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