Koordináta információinak lekérése
Ez a cikk bemutatja, hogyan végezhet fordított címkeresést, amely egy kiválasztott előugró hely címét jeleníti meg.
Kétféleképpen végezhet fordított címkeresést. Ennek egyik módja a Reverse Address Search API lekérdezése a TypeScript REST SDK @azure-rest/maps-search használatával. A másik módszer az, hogy a Fetch API használatával kérést intéz a Reverse Address Search API-hoz egy cím megkereséséhez. Mindkét módszert ebben a cikkben ismertetjük.
Fordított keresési kérés kérése REST SDK-val
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;
Az előző kód példában az első blokk létrehoz egy térképobjektumot, és beállítja a hitelesítési mechanizmust a Microsoft Entra ID használatára. További információ: Térkép létrehozása.
A második kódblokk létrehoz egy objektumot, amely implementálja a TokenCredential felületet a HTTP-kérések Azure-Térképek való hitelesítéséhez a hozzáférési jogkivonattal. Ezután átadja a hitelesítő objektumot a Térképek Searchnek, és létrehozza az ügyfél egy példányát.
A harmadik kódblokk frissíti az egérmutató stílusát egy mutatóra, és létrehoz egy előugró objektumot. További információ: Előugró ablak hozzáadása a térképen.
A negyedik kódblokk egy kattintásos eseményfigyelőt ad hozzá. Aktiváláskor létrehoz egy keresési lekérdezést a kijelölt pont koordinátáival. Ezután GET kérést küld a koordináták címének lekérdezésére a Keresési cím fordított API-jának lekérésére.
Az ötödik kódblokk beállítja a HTML előugró tartalmát a kiválasztott koordináta-pozíció válaszcímének megjelenítéséhez.
A kurzor, az előugró objektum és az click esemény mind létrejön a térkép terhelésesemény-figyelőjében. Ez a kódstruktúra biztosítja a térkép teljes betöltését a koordináták adatainak lekérése előtt.
Fordított keresési kérés kérése a Fetch API-val
Válasszon ki egy helyet a térképen, hogy visszafelé irányuló geokód kérést küldjön az adott helyhez a beolvasás használatával.
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;
Az előző kód példában az első kódblokk létrehoz egy térképobjektumot, és beállítja a hitelesítési mechanizmust a Microsoft Entra ID használatára. Útmutatásért tekintse meg a Térkép létrehozása című témakört.
A második kódblokk az egérmutató stílusát egy mutatóra frissíti. Létrehoz egy előugró objektumot. További információ: Előugró ablak hozzáadása a térképen.
A kód harmadik blokkja egy eseményfigyelőt ad hozzá az egérkattintásokhoz. Az egérkattintáskor a Fetch API használatával kérdezi le az Azure Térképek Fordított címkeresés API-t a kiválasztott koordináták címéhez. A sikeres válasz érdekében összegyűjti a kiválasztott hely címét. Az előugró tartalmat és a pozíciót az előugró osztály setOptions függvényével határozza meg.
A kurzor, az előugró objektum és az click esemény mind létrejön a térkép terhelésesemény-figyelőjében. Ez a kódstruktúra biztosítja a térkép teljes betöltését a koordináták adatainak lekérése előtt.
Az alábbi képen egy képernyőkép látható a két kódminta eredményeiről.
További lépések
További információ a cikkben használt osztályokról és módszerekről:
A teljes kódra vonatkozó példákért tekintse meg az alábbi cikkeket: