좌표에서 정보 가져오기

아티클
02/23/2024

이 문서에서는 선택한 팝업 위치의 주소를 표시하는 역방향 주소 검색을 수행하는 방법을 보여 줍니다.

역방향 주소 검색을 수행하는 두 가지 방법이 있습니다. 한 가지 방법은 TypeScript REST SDK @azure-rest/maps-search를 통해 역방향 주소 검색 API를 쿼리하는 것입니다. 다른 방법은 Fetch 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를 사용하도록 인증 메커니즘을 설정합니다. 자세한 내용은 맵 만들기를 참조하세요.

두 번째 코드 블록은 액세스 토큰을 사용하여 Azure Maps에 대한 HTTP 요청을 인증하도록 TokenCredential 인터페이스를 구현하는 개체를 만듭니다. 그런 다음, 자격 증명 개체를 MapsSearch에 전달하고 클라이언트의 인스턴스를 만듭니다.

세 번째 코드 블록은 마우스 커서의 스타일을 포인터로 업데이트하고 popup 개체를 만듭니다. 자세한 내용은 맵에 팝업 추가를 참조하세요.

네 번째 코드 블록은 마우스 클릭 이벤트 수신기를 추가합니다. 트리거되면 선택한 지점의 좌표를 사용하여 검색 쿼리를 만듭니다. 그런 다음, GET 요청을 수행하여 역방향으로 검색 주소 가져오기 API에서 좌표의 주소를 쿼리합니다.

다섯 번째 코드 블록은 선택한 좌표 위치의 응답 주소를 표시하도록 HTML 팝업 콘텐츠를 설정합니다.

커서의 변경 내용, 팝업 개체 및 click 이벤트는 모두 맵의 로드 이벤트 수신기에 생성됩니다. 이 코드 구조는 좌표 정보를 검색하기 전에 맵이 완전히 로드되도록 합니다.

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", 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를 사용하도록 인증 메커니즘을 설정합니다. 지침은 맵 만들기를 참조하세요.

두 번째 코드 블록은 포인터에 마우스 커서의 스타일을 업데이트합니다. popup 개체를 인스턴스화합니다. 자세한 내용은 맵에 팝업 추가를 참조하세요.

세 번째 코드 블록은 마우스 클릭에 대한 이벤트 수신기를 추가합니다. 마우스 클릭 시 Fetch API를 사용하여 Azure Maps Reverse Address Search API에서 선택한 좌표 주소를 쿼리합니다. 성공적인 응답의 경우 선택한 위치의 주소를 수집합니다. popup 클래스의 setOptions 함수를 사용하여 팝업 콘텐츠 및 위치를 정의합니다.

다음 이미지는 두 코드 샘플의 결과를 보여 주는 스크린샷입니다.