Mostrar resultados da pesquisa no mapa
Este artigo mostra como fazer uma pesquisa para localização de interesse e mostrar os resultados da pesquisa no mapa.
Há duas maneiras de procurar um local de interesse. Uma maneira é usar o REST SDK do TypeScript, @azure-rest/maps-search para fazer uma solicitação de pesquisa. A outra maneira é fazer uma solicitação de pesquisa à API de pesquisa difusa do Azure Mapas por meio da API de Fetch. Ambas as abordagens são descritas neste artigo.
Fazer uma solicitação de pesquisa por meio do 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;
No exemplo de código anterior, o primeiro bloco constrói um objeto de mapa e define o mecanismo de autenticação para usar o Microsoft Entra ID. Para obter mais informações, confira Criar um mapa.
O segundo bloco de código cria um objeto que implementa a interface TokenCredential para autenticar solicitações HTTP ao Azure Mapas com o token de acesso. Em seguida, ele passa o objeto da credencial para MapsSearch e cria uma instância do cliente.
O terceiro bloco de código cria um objeto de fonte de dados usando a classe DataSource e adiciona resultados de pesquisa a ele. Uma camada de símbolo usa texto ou ícones para renderizar dados com base em ponto encapsulados na DataSource como símbolos no mapa. Em seguida, uma camada de símbolo é criada. A fonte de dados é adicionada à camada de símbolo, que é então adicionada ao mapa.
O quarto bloco de código faz uma solicitação GET no cliente MapsSearch. Ele permite que você faça uma pesquisa de texto de forma livre por meio da API REST da Pesquisa Difusa para pesquisar pelo ponto de interesse. As solicitações Get à API de pesquisa difusa podem manipular qualquer combinação de entradas difusas. A resposta é então convertida em objetos do Recurso e adicionada à fonte de dados, o que faz com que os dados sejam automaticamente renderizados no mapa por meio da camada de símbolos.
O último bloco de código ajusta os limites da câmera para o mapa usando a propriedade setCamera do mapa.
Os limites de solicitação de pesquisa, fonte de dados, camada de símbolo e câmera estão dentro do ouvinte de eventos do mapa. Queremos garantir que os resultados sejam exibidos depois que o mapa for totalmente carregado.
Fazer uma solicitação de pesquisa via API Fetch
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;
No exemplo de código anterior, o primeiro bloco de código constrói um objeto de mapa. Ele define o mecanismo de autenticação para usar o Microsoft Entra ID. Para obter mais informações, confira Criar um mapa.
O segundo bloco de código cria um objeto de fonte de dados usando a classe DataSource e adiciona os resultados da pesquisa a ele. Uma camada de símbolo usa texto ou ícones para renderizar dados com base em ponto encapsulados na DataSource como símbolos no mapa. Em seguida, uma camada de símbolo é criada. A fonte de dados é adicionada à camada de símbolo, que é então adicionada ao mapa.
O terceiro bloco de código cria uma URL para fazer uma solicitação de pesquisa.
O quarto bloco de código usa a API de Busca. A API de Fetch é usada para fazer uma solicitação à API de pesquisa difusa do Azure Mapas a fim de pesquisar os pontos de interesse. A API de pesquisa difusa pode manipular qualquer combinação de entradas difusas. Em seguida, ele manipula e analisa a resposta de pesquisa e adiciona os marcadores do resultado à matriz searchPins.
O último bloco de código cria um objeto BoundingBox. Ele usa a matriz de resultados e, em seguida, ajusta os limites da câmera para o mapa usando o setCamera desse mapa. Em seguida, ele renderiza os marcadores do resultado.
A solicitação de pesquisa, a fonte de dados, a camada de símbolo e os limites da câmera são definidos no ouvinte de eventos do mapa para garantir que os resultados sejam exibidos após o carregamento total do mapa.
A imagem a seguir é uma captura de tela que mostra os resultados dos dois exemplos de código.
Próximas etapas
Saiba mais sobre a Pesquisa Difusa:
Saiba mais sobre as classes e métodos usados neste artigo:
Consulte os seguintes artigos para obter exemplos de código completo: