Presentación de los resultados de la búsqueda en el mapa
En este artículo se describe cómo buscar ubicaciones de interés y mostrar los resultados de búsqueda en el mapa.
Hay dos maneras de buscar una ubicación de interés. Una manera es usar el SDK de REST de TypeScript, @azure-rest/maps-search, para realizar una solicitud de búsqueda. La otra consiste en realizar una solicitud de búsqueda en la Azure Maps Fuzzy Search API a través de la API de captura. Ambos métodos se describen en este artículo.
Realizar una solicitud de búsqueda a través del SDK de 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;
En el ejemplo de código anterior, el primer bloque construye un objeto de mapa y establece el mecanismo de autenticación para usar Microsoft Entra ID. Para obtener más información, consulte Creación de un mapa.
El segundo bloque de código crea un objeto que implementa la interfaz TokenCredential para autenticar las solicitudes HTTP en Azure Maps con el token de acceso. A continuación, pasa el objeto de credencial a MapsSearch y crea una instancia del cliente.
El tercer bloque de código crea un objeto de origen de datos con la clase DataSource y le agrega los resultados de la búsqueda. Una capa de símbolos usa texto o iconos para representar los datos basados en puntos encapsulados en DataSource como símbolos en el mapa. A continuación, se crea una capa de símbolos. El origen de datos se agrega a la capa de símbolos y, después, esta se agrega al mapa.
El cuarto bloque de código realiza una solicitud GET en el cliente MapsSearch. Permite realizar una búsqueda de texto de forma libre a través de la Get Search Fuzzy rest API para buscar el punto de interés. Las solicitudes Get Search Fuzzy API puede administrar cualquier combinación de entradas aproximadas. Después, la respuesta se convierte en objetos Feature y se agrega al origen de datos, lo cual automáticamente da como resultado la representación de los datos en el mapa mediante la capa de símbolos.
El último bloque de código ajusta los límites de cámara para el mapa mediante la propiedad setCamera del mapa.
La solicitud de búsqueda, el origen de datos, la capa de símbolos y los límites de cámara están dentro del agente de escucha de eventos del mapa. Queremos asegurarnos de que los resultados se muestran una vez que el mapa se carga por completo.
Realización de una solicitud de búsqueda a través de la API de captura
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;
En el ejemplo de código anterior, el primer bloque de código construye un objeto de mapa. Establece el mecanismo de autenticación para usar Microsoft Entra ID. Para obtener más información, consulte Creación de un mapa.
El segundo bloque de código crea un objeto de origen de datos con la clase DataSource y le agrega los resultados de la búsqueda. Una capa de símbolos usa texto o iconos para representar los datos basados en puntos encapsulados en DataSource como símbolos en el mapa. A continuación, se crea una capa de símbolos. El origen de datos se agrega a la capa de símbolos y, después, esta se agrega al mapa.
El tercer bloque de código crea una dirección URL para realizar una solicitud de búsqueda.
El cuarto bloque de código usa la API de captura. La API de captura se usa para hacer una solicitud a Azure Maps Fuzzy search API para buscar los puntos de interés. Fuzzy Search API puede administrar cualquier combinación de entradas aproximadas. A continuación, administra y analiza la respuesta de búsqueda y agrega las chinchetas de resultados a la matriz searchPins.
El último bloque de código crea un objeto BoundingBox. Usa la matriz de resultados y, a continuación, ajusta los límites de cámara para el mapa mediante la configuración setCamera del mapa. A continuación, muestra las chinchetas de resultados.
La solicitud de búsqueda, el origen de datos, la capa de símbolos y los límites de cámara se establecen en el agente de escucha de eventos del mapa para asegurar que los resultados se muestran una vez que el mapa se carga completamente.
La siguiente imagen es una captura de pantalla que muestra los resultados de los dos ejemplos de código.
Pasos siguientes
Más información sobre la búsqueda aproximada:
Más información sobre las clases y los métodos utilizados en este artículo:
Consulte los siguientes artículos para obtener ejemplos de código completo: