Visa sökresultat på kartan
Den här artikeln visar hur du söker efter platser av intresse och visar sökresultaten på kartan.
Det finns två sätt att söka efter en plats av intresse. Ett sätt är att använda TypeScript REST SDK, @azure-rest/maps-search för att göra en sökbegäran. Det andra sättet är att göra en sökbegäran till Azure Kartor Fuzzy-sök-API:et via Fetch-API:et. Båda metoderna beskrivs i den här artikeln.
Gör en sökbegäran 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;
I föregående kodexempel konstruerar det första blocket ett kartobjekt och anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Mer information finns i Skapa en karta.
Det andra kodblocket skapar ett objekt som implementerar TokenCredential-gränssnittet för att autentisera HTTP-begäranden till Azure Kartor med åtkomsttoken. Det skickar sedan autentiseringsobjektet till Kartor Search och skapar en instans av klienten.
Det tredje kodblocket skapar ett datakällobjekt med hjälp av klassen DataSource och lägger till sökresultat i det. Ett symbollager använder text eller ikoner för att återge punktbaserade data som omsluts i DataSource som symboler på kartan. Ett symbollager skapas sedan. Datakällan läggs till i symbolskiktet, som sedan läggs till på kartan.
Det fjärde kodblocket gör en GET-begäran i Kartor Search-klienten. Det gör att du kan utföra en textsökning i det kostnadsfria formuläret via rest-API:et Get Search Fuzzy för att söka efter intressanta platser. Hämta begäranden till Search Fuzzy-API:et kan hantera valfri kombination av fuzzy-indata. Svaret konverteras sedan till funktionsobjekt och läggs till i datakällan, vilket automatiskt resulterar i att data återges på kartan via symbolskiktet.
Det sista kodblocket justerar kameragränsen för kartan med hjälp av map-uppsättningen Kamera egenskap.
Sökbegäran, datakälla, symbolskikt och kameragräns finns i kartans händelselyssnare . Vi vill se till att resultaten visas när kartan har lästs in helt.
Skapa en sökbegäran 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;
I föregående kodexempel konstruerar det första kodblocket ett kartobjekt. Den anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Mer information finns i Skapa en karta.
Det andra kodblocket skapar ett datakällobjekt med klassen DataSource och lägger till sökresultat i det. Ett symbollager använder text eller ikoner för att återge punktbaserade data som omsluts i DataSource som symboler på kartan. Ett symbollager skapas sedan. Datakällan läggs till i symbolskiktet, som sedan läggs till på kartan.
Det tredje kodblocket skapar en URL att göra en sökbegäran till.
Det fjärde kodblocket använder Fetch-API:et. Fetch-API:et används för att göra en begäran till Azure Kartor Fuzzy-sök-API:et för att söka efter intressanta platser. Fuzzy-sök-API:et kan hantera valfri kombination av fuzzy-indata. Den hanterar och parsar sedan söksvaret och lägger till resultatstiften i searchPins-matrisen.
Det sista kodblocket skapar ett BoundingBox-objekt . Den använder matrisen med resultat och justerar sedan kameragränsen för kartan med hjälp av kartans uppsättning Kamera. Sedan renderas resultatstiften.
Sökbegäran, datakällan, symbolskiktet och kameragränsen anges i kartans händelselyssnare för att säkerställa att resultaten visas när kartan har lästs in helt.
Följande bild är en skärmbild som visar resultatet av de två kodexemplen.
Nästa steg
Läs mer om Fuzzy Search:
Läs mer om de klasser och metoder som används i den här artikeln:
Se följande artiklar för fullständiga kodexempel: