Получение сведений из координат

2025-04-11

В этой статье показано, как выполнить поиск обратного адреса, отображающий адрес выбранного всплывающего окна.

Существует два способа выполнения поиска обратного адреса. Одним из способов является запрос API поиска обратных адресов с помощью пакета REST SDK TypeScript @azure-rest/maps-search. Другой способ — использовать API получения для запроса к API обратного поиска адресов для поиска адреса. Оба подхода описаны в этой статье.

Создание обратного запроса поиска с помощью пакета SDK REST

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. Дополнительные сведения см. в разделе "Создание карты".

Второй блок кода создает объект, реализующий интерфейс TokenCredential для проверки подлинности HTTP-запросов в Azure Maps с помощью маркера доступа. Затем он передает объект учетных данных в MapsSearch и создает экземпляр клиента.

Третий блок кода обновляет стиль курсора мыши на указатель и создает объект всплывающего окна . Дополнительные сведения см. в разделе "Добавление всплывающего окна на карте".

Четвертый блок кода добавляет прослушиватель событий щелчка мыши. При активации он создает поисковый запрос с координатами выбранной точки. Затем он выполняет запрос GET для запроса ОБРАТНОго API получения адреса поиска для адреса координат.

Пятый блок кода настраивает всплывающее содержимое HTML для отображения адреса ответа для выбранной позиции координаты.

Изменение курсора, всплывающего объекта и click события создаются в прослушивателе событий загрузки карты. Эта структура кода обеспечивает полную загрузку карты перед получением сведений о координатах.

Сделать запрос на обратный поиск через Fetch 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. Вы можете обратиться к Создать карту для получения инструкций.

Второй блок кода обновляет стиль курсора мыши на указатель. Он создает экземпляр всплывающего объекта. Дополнительные сведения см. в разделе "Добавление всплывающего окна на карте".

Третий блок кода добавляет прослушиватель событий для щелчков мыши. После щелчка мышью использует Fetch API для запроса у API обратного поиска адресов в Azure Maps адреса выбранных координат. Для успешного ответа он собирает адрес выбранного расположения. Он определяет содержимое всплывающего окна и положение с помощью функции setOptions класса всплывающего окна.

На следующем рисунке показан снимок экрана, показывающий результаты двух примеров кода.

Дальнейшие действия

Дополнительные сведения о классах и методах, которые используются в этой статье:

Карта

Popup

Полные примеры кода см. в следующих статьях:

Отображение направлений от точки А до точки Б

Отображение трафика

Поделиться через

Получение сведений из координат

Создание обратного запроса поиска с помощью пакета SDK REST

Сделать запрос на обратный поиск через Fetch API

Дальнейшие действия

Обратная связь

Дополнительные ресурсы