Zoekresultaten op de kaart weergeven
In dit artikel leest u hoe u kunt zoeken naar de gewenste locatie en hoe u de zoekresultaten op de kaart kunt weergeven.
Er zijn twee manieren om te zoeken naar een interessante locatie. Een manier is om de TypeScript REST SDK te gebruiken, @azure-rest/maps-search om een zoekaanvraag te doen. De andere manier is om een zoekaanvraag in te dienen bij Azure Kaarten Fuzzy-zoek-API via de Fetch-API. Beide benaderingen worden beschreven in dit artikel.
Een zoekaanvraag doen via 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;
In het vorige codevoorbeeld maakt het eerste blok een kaartobject en stelt het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor meer informatie.
Het tweede codeblok maakt een object dat de TokenCredential-interface implementeert om HTTP-aanvragen te verifiëren bij Azure Kaarten met het toegangstoken. Vervolgens wordt het referentieobject doorgegeven aan Kaarten Search en wordt een exemplaar van de client gemaakt.
Het derde codeblok maakt een gegevensbronobject met behulp van de DataSource-klasse en voegt er zoekresultaten aan toe. Een symboollaag maakt gebruik van tekst of pictogrammen om puntgegevens in de DataSource weer te geven als symbolen op de kaart. Vervolgens wordt er een symboollaag gemaakt. De gegevensbron wordt toegevoegd aan de symboollaag, die vervolgens aan de kaart wordt toegevoegd.
Het vierde codeblok doet een GET-aanvraag in de Kaarten Search-client. Hiermee kunt u een zoekactie voor vrije formuliertekst uitvoeren via de Get Search Fuzzy rest API om te zoeken naar nuttige plaatsen. Aanvragen voor de Search Fuzzy-API kunnen elke combinatie van fuzzy invoer verwerken. Het antwoord wordt vervolgens geconverteerd naar functieobjecten en toegevoegd aan de gegevensbron, waardoor de gegevens automatisch op de kaart worden weergegeven via de symboollaag.
Met het laatste codeblok worden de cameragrenzen voor de kaart aangepast met behulp van de eigenschap SetCamera van Map.
De zoekaanvraag, gegevensbron, symboollaag en cameragrenzen bevinden zich in de gebeurtenislistener van de kaart. We willen ervoor zorgen dat de resultaten worden weergegeven nadat de kaart volledig is geladen.
Een zoekaanvraag maken via fetch-API
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;
In het vorige codevoorbeeld maakt het eerste codeblok een kaartobject. Hiermee stelt u het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor meer informatie.
Het tweede codeblok maakt een gegevensbronobject met behulp van de klasse DataSource en voegt er zoekresultaten aan toe. Een symboollaag maakt gebruik van tekst of pictogrammen om puntgegevens in de DataSource weer te geven als symbolen op de kaart. Vervolgens wordt er een symboollaag gemaakt. De gegevensbron wordt toegevoegd aan de symboollaag, die vervolgens aan de kaart wordt toegevoegd.
Het derde codeblok maakt een URL om een zoekaanvraag in te dienen.
Het vierde codeblok maakt gebruik van de Fetch-API. De Fetch-API wordt gebruikt om een aanvraag in te dienen bij Azure Kaarten Fuzzy-zoek-API om te zoeken naar de nuttige plaatsen. De Fuzzy-zoek-API kan elke combinatie van fuzzy invoer verwerken. Vervolgens wordt het zoekantwoord verwerkt en geparseerd en worden de resultaatpins toegevoegd aan de searchPins-matrix.
Met het laatste codeblok wordt een BoundingBox-object gemaakt. Het maakt gebruik van de matrix met resultaten en past vervolgens de cameragrenzen voor de kaart aan met behulp van de setCamera van de kaart. Vervolgens worden de resultaatpinnen weergegeven.
De zoekaanvraag, de gegevensbron, de symboollaag en de cameragrenzen worden ingesteld binnen de gebeurtenislistener van de kaart om ervoor te zorgen dat de resultaten worden weergegeven nadat de kaart volledig is geladen.
De volgende afbeelding is een schermopname met de resultaten van de twee codevoorbeelden.
Volgende stappen
Meer informatie over Fuzzy Search:
Meer informatie over de klassen en methoden die in dit artikel worden gebruikt:
Zie de volgende artikelen voor volledige codevoorbeelden: