從座標取得資訊

2025-04-23

本文說明如何進行反向位址搜尋，以顯示所選快顯位置的位址。

有兩種方式可以進行反向位址搜尋。其中一種方式是透過 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 事件都是在地圖的 load 事件監聽器中建立的。此程式代碼結構可確保在擷取座標資訊之前完全載入地圖。

透過擷取 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。要獲取相關指示，請參閱建立地圖。

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

第三個程式代碼區塊會新增滑鼠點選的事件監聽器。當按一下滑鼠時，它會使用 Fetch API 來查詢 Azure 地圖的反向位址搜尋 API，以獲取所選座標的位址。針對成功的回應，它會收集所選位置的位址。它會使用快顯類別的 setOptions 函式來定義快顯內容和位置。

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

下圖顯示兩個程式代碼範例結果的螢幕快照。