Zobrazit výsledky hledání na mapě
V tomto článku se dozvíte, jak vyhledat umístění, které vás zajímá, a zobrazit výsledky hledání na mapě.
Existují dva způsoby, jak vyhledat lokalitu, která je zajímavá. Jedním ze způsobů je použít sadu TypeScript REST SDK, @azure-rest/maps-search k vytvoření požadavku na hledání. Dalším způsobem je vytvoření požadavku na vyhledávání do Azure Mapy rozhraní API přibližného vyhledávání prostřednictvím rozhraní API pro načtení. Oba přístupy jsou popsány v tomto článku.
Vytvoření žádosti o vyhledávání prostřednictvím sady 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>");
// Create a data source and add it to the map.
const datasource = new atlas.source.DataSource();
map.sources.add(datasource);
// Add a layer for rendering point data.
const resultLayer = new atlas.layer.SymbolLayer(datasource);
map.layers.add(resultLayer);
// Search for gas stations near Seattle.
const response = await client.path("/search/fuzzy/{format}", "json").get({
queryParameters: {
query: "gasoline station",
lat: 47.6101,
lon: -122.34255
}
});
// Arrays to store bounds for results.
const bounds = [];
// Convert the response into Feature and add it to the data source.
const searchPins = response.body.results.map((result) => {
const position = [result.position.lon, result.position.lat];
bounds.push(position);
return new atlas.data.Feature(new atlas.data.Point(position), {
position: result.position.lat + ", " + result.position.lon
});
});
// Add the pins to the data source.
datasource.add(searchPins);
// Set the camera to the bounds of the pins
map.setCamera({
bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
padding: 40
});
});
};
document.body.onload = onload;
V předchozím příkladu kódu první blok vytvoří objekt mapy a nastaví ověřovací mechanismus tak, aby používal Microsoft Entra ID. Další informace najdete v tématu Vytvoření mapy.
Druhý blok kódu vytvoří objekt, který implementuje rozhraní TokenCredential pro ověřování požadavků HTTP do Azure Mapy pomocí přístupového tokenu. Pak předá objekt přihlašovacích údajů Mapy Search a vytvoří instanci klienta.
Třetí blok kódu vytvoří objekt zdroje dat pomocí třídy DataSource a přidá do něj výsledky hledání. Vrstva symbolů používá text nebo ikony k vykreslení dat založených na bodech zabalených v Zdroji dat jako symbolů na mapě. Vytvoří se vrstva symbolu. Zdroj dat se přidá do vrstvy symbolů, která se pak přidá do mapy.
Čtvrtý blok kódu vytvoří požadavek GET v klientovi Mapy Search. Umožňuje provádět bezplatné vyhledávání textu ve formuláři prostřednictvím rozhraní API get Search Fuzzy rest api k vyhledání bodu zájmu. Získejte požadavky na rozhraní API přibližného vyhledávání, které dokáže zpracovat libovolnou kombinaci přibližných vstupů. Odpověď se pak převede na objekty Funkce a přidá se do zdroje dat, což automaticky způsobí, že se data vykreslují na mapě prostřednictvím vrstvy symbolů.
Poslední blok kódu upraví hranice kamery pro mapu pomocí vlastnosti Map set Kamera.
Žádost o vyhledávání, zdroj dat, vrstva symbolů a hranice kamery jsou uvnitř naslouchacího procesu události mapy. Chceme zajistit, aby se výsledky zobrazovaly po úplném načtení mapy.
Vytvoření požadavku vyhledávání prostřednictvím rozhraní API pro načtení
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", () => {
// Create a data source and add it to the map.
const datasource = new atlas.source.DataSource();
map.sources.add(datasource);
// Add a layer for rendering point data.
const resultLayer = new atlas.layer.SymbolLayer(datasource);
map.layers.add(resultLayer);
// Send a request to Azure Maps search API
let url = "https://atlas.microsoft.com/search/fuzzy/json?";
url += "&api-version=1";
url += "&query=gasoline%20station";
url += "&lat=47.6101";
url += "&lon=-122.34255";
url += "&radius=100000";
// Parse the API response and create a pin on the map for each result
fetch(url, {
headers: {
Authorization: "Bearer " + map.authentication.getToken(),
"x-ms-client-id": "<Your Azure Maps Client Id>"
}
})
.then((response) => response.json())
.then((response) => {
// Arrays to store bounds for results.
const bounds = [];
// Convert the response into Feature and add it to the data source.
const searchPins = response.results.map((result) => {
const position = [result.position.lon, result.position.lat];
bounds.push(position);
return new atlas.data.Feature(new atlas.data.Point(position), {
position: result.position.lat + ", " + result.position.lon
});
});
// Add the pins to the data source.
datasource.add(searchPins);
// Set the camera to the bounds of the pins
map.setCamera({
bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
padding: 40
});
});
});
};
document.body.onload = onload;
V předchozím příkladu kódu první blok kódu vytvoří objekt mapy. Nastaví mechanismus ověřování tak, aby používal ID Microsoft Entra. Další informace najdete v tématu Vytvoření mapy.
Druhý blok kódu vytvoří objekt zdroje dat pomocí třídy DataSource a přidá do něj výsledky hledání. Vrstva symbolů používá text nebo ikony k vykreslení dat založených na bodech zabalených v Zdroji dat jako symbolů na mapě. Vytvoří se vrstva symbolu. Zdroj dat se přidá do vrstvy symbolů, která se pak přidá do mapy.
Třetí blok kódu vytvoří adresu URL pro vytvoření požadavku na vyhledávání.
Čtvrtý blok kódu používá rozhraní Fetch API. Rozhraní Fetch API slouží k vytvoření požadavku na rozhraní API služby Azure Mapy Přibližné vyhledávání k vyhledání bodů zájmu. Rozhraní API přibližného vyhledávání dokáže zpracovat libovolnou kombinaci přibližných vstupů. Pak zpracuje a parsuje odpověď hledání a přidá špendlíky výsledků do pole searchPins.
Poslední blok kódu vytvoří objekt BoundingBox . Použije pole výsledků a pak upraví hranice kamery pro mapu pomocí sady mapy Kamera. Potom vykreslí špendlíky výsledků.
Požadavek na vyhledávání, zdroj dat, vrstva symbolů a hranice kamery jsou nastavené v naslouchacím procesu událostí mapy, aby se zajistilo, že se výsledky zobrazí po úplném načtení mapy.
Následující obrázek je snímek obrazovky znázorňující výsledky dvou ukázek kódu.
Další kroky
Další informace o vyhledávání přibližných shod:
Další informace o třídách a metodách používaných v tomto článku:
Úplné příklady kódu najdete v následujících článcích: