Abrufen von Informationen von einer Koordinate
In diesem Artikel wird gezeigt, wie Sie eine inverse Adresssuche durchführen, die die Adresse einer ausgewählten Popup-Position anzeigt.
Es gibt zwei Möglichkeiten, eine inverse Adresssuche durchzuführen. Eine Möglichkeit besteht darin, die API für die umgekehrte Adresssuche über das TypeScript REST SDK @azure-rest/maps-search abzufragen. Die andere Möglichkeit besteht in der Verwendung der Fetch-API für eine Anforderung an die API für die umgekehrte Adresssuche, um eine Adresse zu finden. Beide Ansätze werden in diesem Artikel beschrieben.
Durchführen einer Anforderung für die umgekehrte Suche über das 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;
Im obigen Codebeispiel erstellt der erste Block ein Kartenobjekt und legt als Authentifizierungsmechanismus die Verwendung von Microsoft Entra ID fest. Weitere Informationen finden Sie unter Erstellen einer Karte.
Der zweite Codeblock erstellt ein Objekt, das die TokenCredential-Schnittstelle implementiert, um HTTP-Anforderungen an Azure Maps mit dem Zugriffstoken zu authentifizieren. Anschließend wird das Anmeldeinformationsobjekt an MapsSearch übergeben und eine Instanz des Clients erstellt.
Der dritte Codeblock aktualisiert den Stil des Mauscursors in einen Zeiger und erstellt ein popup-Objekt. Weitere Informationen finden Sie unter Hinzufügen eines Popupelements auf der Karte.
Der vierte Codeblock fügt einen Ereignislistener für Mausklicks hinzu. Bei Auslösung wird eine Suchabfrage mit den Koordinaten des ausgewählten Punkts erstellt. Dabei wird eine GET-Anforderung verwendet, um die API für die umgekehrte Adresssuche nach der Adresse der Koordinaten abzufragen.
Der fünfte Codeblock richtet den HTML-Popupinhalt ein, um die Adresse aus der Antwort für die ausgewählte Koordinatenposition anzuzeigen.
Die Änderung des Cursors, das Popupobjekt und das click-Ereignis werden jeweils im Ladeereignislistener der Karte erstellt. Diese Codestruktur stellt sicher, dass die Karte vollständig geladen wurde, bevor Koordinateninformationen abgerufen werden.
Durchführen einer inversen Suchanforderung über die Fetch-API
Wählen Sie eine Position auf der Karte aus, um für die ausgewählte Position mithilfe der Fetch-API eine inverse Geocodierungsanforderung auszuführen.
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;
Im obigen Codebeispiel erstellt der erste Codeblock ein Kartenobjekt und legt als Authentifizierungsmechanismus die Verwendung von Microsoft Entra ID fest. Eine Anleitung finden Sie unter Erstellen einer Karte.
Der zweite Codeblock aktualisiert den Stil des Mauscursors zu einem Zeiger. Er instanziiert ein popup-Objekt. Weitere Informationen finden Sie unter Hinzufügen eines Popupelements auf der Karte.
Der dritte Codeblock fügt einen Ereignislistener für Mausklicks hinzu. Nach einem Mausklick wird mithilfe der Fetch-API die Azure Maps-API für die umgekehrte Adresssuche nach der ausgewählten Adresse für die Koordinaten abgefragt. Für eine erfolgreiche Antwort erfasst sie die Adresse für den ausgewählten Standort. Sie definiert den popup-Inhalt und die Position mithilfe der Funktion setOptions der popup-Klasse.
Die Änderung des Cursors, das Popupobjekt und das click-Ereignis werden jeweils im Ladeereignislistener der Karte erstellt. Diese Codestruktur stellt sicher, dass die Karte vollständig geladen wurde, bevor Koordinateninformationen abgerufen werden.
Die folgende Abbildung ist ein Screenshot, der die Ergebnisse der beiden Codebeispiele zeigt:
Nächste Schritte
Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:
Die folgenden Artikel enthalten vollständige Codebeispiele: