Afficher les résultats de recherche sur la carte
Cet article explique comment rechercher des lieux d’intérêt et afficher les résultats de la recherche sur la carte.
Vous pouvez rechercher un lieu d’intérêt de deux façons. L’une des façons consiste à utiliser le SDK REST TypeScript, @azure-rest/maps-search pour effectuer une demande de recherche. La seconde consiste à effectuer une requête de recherche à l'API de recherche approximative d’Azure Maps via l'API de récupération. Les deux approches sont décrites dans cet article.
Effectuer une demande de recherche via le SDK REST
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;
Dans l’exemple de code précédent, le premier bloc construit un objet de carte et définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Pour plus d’informations, voir Créer une carte.
Le deuxième bloc de code crée un objet qui implémente l’interface TokenCredential pour authentifier les requêtes HTTP auprès d’Azure Maps avec le jeton d’accès. Il transmet ensuite l’objet d’informations d’identification à MapsSearch et crée une instance du client.
Le troisième bloc de code crée un objet source de données à l’aide de la classe DataSource et y ajoute les résultats de la recherche. Une couche de symboles utilise du texte ou des icônes pour afficher les données basées sur le point, qui sont wrappées dans la source de données en tant que symboles sur la carte. Une couche de symboles est alors créée. La source de données est ajoutée à la couche de symbole, qui est ensuite ajoutée à la carte.
Le quatrième bloc de code effectue une requête GET dans le client MapsSearch. Cela vous permet d’effectuer une recherche de texte de forme libre via l’API REST de recherche approximative pour rechercher des points d’intérêt. Les requêtes GET à l’API Search Fuzzy peuvent gérer toutes les combinaisons d’entrées approximatives. La réponse est ensuite convertie en objets Caractéristique et ajoutée à la source de données, les données sont alors automatiquement affichées sur la carte par le biais de la couche de symbole.
Le dernier bloc de code ajuste les limites d’appareil photo pour la carte à l’aide de la propriété setCamera de la carte.
La demande de recherche, la source de données, la couche de symboles et les limites d’appareil photo se trouvent à l’intérieur du détecteur d’événements de la carte. Nous voulons nous assurer que les résultats s’affichent après le chargement complet de la carte.
Requête de recherche via l'API de récupération
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;
Dans l’exemple de code précédent, le premier bloc de code construit un objet de carte. Il définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Pour plus d’informations, voir Créer une carte.
Le deuxième bloc de code crée un objet source de données à l’aide de la classe DataSource et y ajoute les résultats de la recherche. Une couche de symboles utilise du texte ou des icônes pour afficher les données basées sur le point, qui sont wrappées dans la source de données en tant que symboles sur la carte. Une couche de symboles est alors créée. La source de données est ajoutée à la couche de symbole, qui est ensuite ajoutée à la carte.
Le troisième bloc de code crée une URL pour effectuer une requête de recherche.
Le quatrième bloc de code utilise l’API Fetch. L’API Fetch est utilisée pour demander à l’API Fuzzy Search d’Azure Maps de rechercher les points d’intérêt. L’API de recherche floue peut gérer n’importe quelle combinaison d’entrées approximatives. Elle gère et analyse ensuite la réponse de recherche et ajoute les repères qui en résultent au tableau searchPins.
Le dernier bloc de code crée un objet BoundingBox. Il utilise le tableau de résultats, puis ajuste les limites d’appareil photo pour la carte à l’aide de l’option setCamera de la carte. Il affiche ensuite les épingles qui en résultent.
La demande de recherche, la source de données, la couche de symboles et les limites d’appareil photo sont définies au sein du détecteur d’événements de la carte pour garantir que les résultats sont affichés après le chargement complet de la carte.
L’image suivante est une capture d’écran montrant les résultats des deux exemples de code.
Étapes suivantes
En savoir plus sur Recherche approximative :
En savoir plus sur les classes et les méthodes utilisées dans cet article :
Pour voir des exemples de codes complets, consultez les articles suivants :