Uzyskiwanie informacji na podstawie współrzędnych

Artykuł
10/18/2023

W tym artykule pokazano, jak utworzyć wyszukiwanie odwrotnego adresu, które pokazuje adres wybranej lokalizacji podręcznej.

Istnieją dwa sposoby wyszukiwania odwrotnego adresu. Jednym ze sposobów jest wykonywanie zapytań względem interfejsu API wyszukiwania odwrotnego adresu za pomocą zestawu SDK REST języka TypeScript @azure-rest/maps-search. Innym sposobem jest użycie interfejsu API pobierania w celu utworzenia żądania do interfejsu API wyszukiwania odwrotnych adresów w celu znalezienia adresu. Oba podejścia zostały opisane w tym artykule.

Tworzenie żądania wyszukiwania wstecznego za pomocą zestawu 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;

W poprzednim przykładzie kodu pierwszy blok tworzy obiekt mapy i ustawia mechanizm uwierzytelniania na użycie identyfikatora Entra firmy Microsoft. Aby uzyskać więcej informacji, zobacz Tworzenie mapy.

Drugi blok kodu tworzy obiekt, który implementuje interfejs TokenCredential w celu uwierzytelniania żądań HTTP na platformie Azure Mapy przy użyciu tokenu dostępu. Następnie przekazuje obiekt poświadczeń do Mapy Search i tworzy wystąpienie klienta.

Trzeci blok kodu aktualizuje styl kursora myszy na wskaźnik i tworzy obiekt podręczny. Aby uzyskać więcej informacji, zobacz Dodawanie wyskakującego okienka na mapie.

Czwarty blok kodu dodaje odbiornik zdarzeń kliknięcia myszy. Po wyzwoleniu tworzy zapytanie wyszukiwania ze współrzędnymi wybranego punktu. Następnie wysyła żądanie GET, aby wykonać zapytanie dotyczące interfejsu API odwrotnego adresu wyszukiwania dla adresu współrzędnych.

Piąty blok kodu konfiguruje zawartość podręczną HTML w celu wyświetlenia adresu odpowiedzi dla wybranej pozycji współrzędnych.

Zmiana kursora, obiektu podręcznego i click zdarzenia są tworzone w odbiorniku zdarzeń ładowania mapy. Ta struktura kodu zapewnia pełne załadowanie mapy przed pobraniem informacji o współrzędnych.

Tworzenie żądania wyszukiwania wstecznego za pomocą interfejsu API pobierania

Wybierz lokalizację na mapie, aby utworzyć żądanie odwrotnego kodu geograficznego dla tej lokalizacji przy użyciu pobierania.

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;

W poprzednim przykładzie kodu pierwszy blok kodu tworzy obiekt mapy i ustawia mechanizm uwierzytelniania do używania identyfikatora Entra firmy Microsoft. Aby uzyskać instrukcje, zobacz Tworzenie mapy .

Drugi blok kodu aktualizuje styl kursora myszy na wskaźnik. Tworzy wystąpienie obiektu podręcznego. Aby uzyskać więcej informacji, zobacz Dodawanie wyskakującego okienka na mapie.

Trzeci blok kodu dodaje odbiornik zdarzeń dla kliknięć myszy. Po kliknięciu myszą używa interfejsu API pobierania do wykonywania zapytań względem interfejsu API wyszukiwania odwrotnych adresów platformy Azure Mapy dla wybranego adresu współrzędnych. W przypadku pomyślnej odpowiedzi zbiera adres wybranej lokalizacji. Definiuje zawartość i położenie wyskakujące przy użyciu funkcji setOptions klasy podręcznej.

Na poniższej ilustracji przedstawiono zrzut ekranu przedstawiający wyniki dwóch przykładów kodu.