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

从坐标获取信息

项目
10/20/2023

本文介绍如何进行反向地址搜索，以显示所选弹出位置的地址。

可通过两种方法进行反向地址搜索。一种方法是通过 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 Maps 的 HTTP 请求。然后，它将凭据对象传递给 MapsSearch 并创建客户端的实例。

第三个代码块将鼠标光标的样式更新为指针，并创建一个 popup 对象。有关详细信息，请参阅在地图上添加弹出窗口。

第四个代码块添加了鼠标单击事件侦听器。触发后，它使用所选点的坐标创建搜索查询。然后，它发出 GET 请求查询获取搜索地址反向 API 来获取坐标的地址。

第五个代码块设置 HTML 弹出内容，以显示所选坐标位置的响应地址。

光标更改、弹出对象和 click 事件均在地图的加载事件侦听器中创建。此代码结构可确保在检索坐标信息之前完全加载地图。

通过提取 API 发出反向搜索请求

在地图上选择一个位置，使用 fetch 针对该位置发出反向地理编码请求。

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 对象。有关详细信息，请参阅在地图上添加弹出窗口。

第三个代码块针对鼠标单击添加事件侦听器。单击鼠标时，它使用提取 API 查询 Azure Maps 反向地址搜索 API 来获取所选坐标的地址。对于成功的响应，它会收集所选位置的地址。它使用 popup 类的 setOptions 函数定义弹出内容和位置。

光标更改、弹出对象和 click 事件均在地图的加载事件侦听器中创建。此代码结构可确保在检索坐标信息之前完全加载地图。

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