Uzyskaj informacje z koordynatu

W tym artykule opisano, jak przeprowadzić wyszukiwanie adresu według lokalizacji wyskakującej, które ujawnia adres wybranego miejsca.

Istnieją dwa sposoby na odwrotne wyszukiwanie 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 Fetch API do utworzenia żądania do API wyszukiwania adresów wstecz, aby znaleźć adres. 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 w usłudze Azure Maps przy użyciu tokenu dostępu. Następnie przekazuje obiekt poświadczeń do MapsSearch i tworzy wystąpienie klienta.

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

Czwarty blok kodu dodaje nasłuchiwacz zdarzeń kliknięcia myszy. Po wyzwoleniu tworzy zapytanie wyszukiwania ze współrzędnymi wybranego punktu. Następnie wysyła żądanie GET do interfejsu API odwrotnego adresu wyszukiwania w celu uzyskania adresu dla współrzędnych.

Piąty blok kodu konfiguruje zawartość wyskakującego okienka HTML, aby wyświetlać adres odpowiedzi dla wybranej współrzędnej.

Zmiana kursora, obiekt wyskakujący oraz zdarzenie click są tworzone w odbiorniku zdarzeń ładowania mapy. Ta struktura kodu zapewnia pełne załadowanie mapy przed pobraniem informacji o współrzędnych.

Wykonaj żądanie wyszukiwania wstecznego za pomocą interfejsu Fetch API

Wybierz lokalizację na mapie, aby utworzyć żądanie odwrotnego kodu geograficznego dla tej lokalizacji przy użyciu funkcji 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;

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 popup. Aby uzyskać więcej informacji, zobacz Dodawanie wyskakującego okienka na mapie.

Trzeci blok kodu dodaje nasłuchiwacz zdarzeń na kliknięcia myszy. Po kliknięciu myszą używany jest Fetch API, aby wysłać zapytanie do Reverse Address Search API Azure Maps w celu uzyskania adresu dla wybranych współrzędnych. W przypadku pomyślnej odpowiedzi zbiera adres wybranej lokalizacji. Używa funkcji setOptions klasy popup do definiowania zawartości i położenia wyskakującego.

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.

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

Dalsze kroki

Dowiedz się więcej o klasach i metodach używanych w tym artykule:

Zobacz następujące artykuły, aby zapoznać się z pełnymi przykładami kodu: