Búsqueda de puntos cercanos de interés mediante Azure MapsSearch nearby points of interest using Azure Maps

En este tutorial se muestra cómo configurar una cuenta con Azure Maps y luego usar las API de Maps para buscar un punto de interés.This tutorial shows how to set up an account with Azure Maps, then use the Maps APIs to search for a point of interest. En este tutorial, aprenderá a:In this tutorial, you learn how to:

  • Crear una cuenta de Azure MapsCreate an Azure Maps account
  • Recuperar la clave principal de la cuenta de MapsRetrieve the primary key for your Maps account
  • Crear una nueva página web mediante la API de control de mapaCreate a new web page using the map control API
  • Usar el servicio de búsqueda de Maps para encontrar un punto cercano de interésUse the Maps search service to find a nearby point of interest

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Inicio de sesión en Azure PortalSign in to the Azure portal

Inicie sesión en el Azure Portal.Sign in to the Azure portal.

Crear una cuenta con Azure MapsCreate an account with Azure Maps

Cree una nueva cuenta de Maps con los pasos siguientes:Create a new Maps account with the following steps:

  1. En la esquina superior izquierda de Azure Portal, haga clic en Crear un recurso.In the upper left-hand corner of the Azure portal, click Create a resource.
  2. En el campo Buscar en el Marketplace, escriba Maps.In the Search the Marketplace box, type Maps.
  3. En Resultados, seleccione Maps.From the Results, select Maps. Haga clic en el botón Crear que aparece debajo del mapa.Click Create button that appears below the map.
  4. En la página Create Maps Account (Crear una cuenta de Azure Maps), escriba los siguientes valores:On the Create Maps Account page, enter the following values:
    • La suscripción que quiere usar para esta cuenta.The Subscription that you want to use for this account.
    • El nombre del grupo de recursos para esta cuenta.The Resource group name for this account. Puede elegir Crear nuevo o Usar existente para el grupo de recursos.You may choose to Create new or Use existing resource group.
    • El nombre de la nueva cuenta.The Name of your new account.
    • El Plan de tarifa de la cuenta.The Pricing tier for this account.
    • Lea la licencia y la declaración de privacidad y active la casilla para aceptar los términos.Read the License and Privacy Statement, and check the checkbox to accept the terms.
    • Haga clic en el botón Crear.Click the Create button.

Creación de una cuenta de Maps en el portal

Obtención de la clave principal de una cuentaGet the primary key for your account

Una vez que se haya creado correctamente la cuenta de Maps, recupere la clave que le permite consultar las API de Maps.Once your Maps account is successfully created, retrieve the key that enables you to query the Maps APIs.

  1. Abra su cuenta de Maps en el portal.Open your Maps account in the portal.
  2. En la sección de configuración, seleccione Autenticación.In the settings section, select Authentication.
  3. Copie la clave principal al Portapapeles.Copy the Primary Key to your clipboard. Guárdela localmente para usarla más adelante en este tutorial.Save it locally to use later in this tutorial.

Obtención de la clave principal en el portal

Creación de un nuevo mapaCreate a new map

Map Control API es una práctica biblioteca cliente que le permite integrar fácilmente Maps en su aplicación web.The Map Control API is a convenient client library that allows you to easily integrate Maps into your web application. Oculta la complejidad de las llamadas sin servicio de REST e impulsa la productividad con componentes que se pueden diseñar y personalizar.It hides the complexity of the bare REST service calls and boosts your productivity with styleable and customizable components. En los pasos siguientes se muestra cómo crear una página HTML estática insertada con Map Control API.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. En el equipo local, cree un nuevo archivo y asígnele el nombre MapSearch.html.On your local machine, create a new file and name it MapSearch.html.

  2. Agregue los siguientes componentes HTML al archivo:Add the following HTML components to the file:

     <!DOCTYPE html>
     <html>
     <head>
         <title>Map Search</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
         <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
         <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
         <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
         <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
         <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
    
         <script>
         function GetMap(){
             //Add Map Control JavaScript code here.
         }
         </script>
    
         <style>
             html,
             body {
                 width: 100%;
                 height: 100%;
                 padding: 0;
                 margin: 0;
             }
    
             #myMap {
                 width: 100%;
                 height: 100%;
             }
         </style>
     </head>
     <body onload="GetMap()">
         <div id="myMap"></div>
     </body>
     </html>
    

    Observe que el encabezado HTML incluye los archivos de recursos CSS y JavaScript hospedados por la biblioteca de Control de mapa de Azure.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Observe el evento onload en el cuerpo de la página, el cual llamará a la función GetMap cuando el cuerpo de la página se haya cargado.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. La función GetMap contendrá el código JavaScript insertado para acceder a las API de Azure Maps.The GetMap function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. Agregue el siguiente código JavaScript a la función GetMap del archivo HTML.Add the following JavaScript code to the GetMap function of the HTML file. Reemplace la cadena <Your Azure Maps Key> por la clave principal que copió de la cuenta de Maps.Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    

    Este segmento inicializa Map Control API para la clave de cuenta de Azure Maps.This segment initializes the Map Control API for your Azure Maps account key. atlas es el espacio de nombres que contiene la API y los componentes visuales relacionados.atlas is the namespace that contains the API and related visual components. atlas.Map proporciona el control para un mapa web visual e interactivo.atlas.Map provides the control for a visual and interactive web map.

  4. Guarde los cambios en el archivo y abra la página HTML en un explorador.Save your changes to the file and open the HTML page in a browser. Este es el mapa más básico que puede crear con una llamada a atlas.Map mediante la clave de cuenta.This is the most basic map that you can make by calling atlas.Map using your account key.

    Visualización del mapa

  5. En la función GetMap, después de inicializar el mapa, agregue el siguiente código JavaScript.In the GetMap function, after initializing the map, add the following JavaScript code.

    //Wait until the map resources are ready.
    map.events.add('ready', function() {
    
        //Create a data source and add it to the map.
        datasource = new atlas.source.DataSource();
        map.sources.add(datasource);
    
        //Add a layer for rendering point data.
        var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                image: 'pin-round-darkblue',
                anchor: 'center',
                allowOverlap: true
            },
            textOptions: {
                anchor: "top"
            }
        });
    
        map.layers.add(resultLayer);
    });
    

    En este segmento de código se agrega un evento ready al mapa que se activará cuando los recursos del mapa se hayan cargado y se pueda acceder al mapa.In this code segment a ready event is added to the map, which will fire when the map resources have been loaded and the map is ready to be accessed. En el controlador de eventos ready del mapa, se crea un origen de datos para almacenar datos de resultados.In the map ready event handler, a data source is created to store result data. Se crea una capa de símbolos y se asocia al origen de datos.A symbol layer is created and attached to the data source. Esta capa especifica cómo se deben representar los datos de resultados en el origen de datos, en este caso con un icono de chincheta redonda azul oscura centrada sobre la coordenada de resultados y que permite que otros iconos se superpongan.This layer specifies how the result data in the data source should be rendered, in this case with a dark blue round pin icon that is centered over the results coordinate and which allows other icons to overlap. La capa resultante se agrega a las capas de mapa.The result layer is added to the map layers.

Adición de funcionalidades de búsquedaAdd search capabilities

En esta sección se muestra cómo usar Search API de Maps para buscar un punto de interés en el mapa.This section shows how to use the Maps Search API to find a point of interest on your map. Se trata de una API RESTful diseñada para los desarrolladores para buscar direcciones, puntos de interés y otra información geográfica.It's a RESTful API designed for developers to search for addresses, points of interest, and other geographical information. El servicio Search asigna información de latitud y longitud a una dirección especificada.The Search service assigns a latitude and longitude information to a specified address. El módulo de servicio que se explica a continuación, puede usarse para buscar una ubicación mediante Maps Search API.The Service Module explained below can be used to search for a location using the Maps Search API.

Módulo de servicioService Module

  1. En el controlador de eventos ready del mapa, construya la URL del servicio de búsqueda; para ello, agregue el siguiente código de Javascript.In the map ready event handler, construct the search service URL by adding the following Javascript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the SearchURL object
    var searchURL = new atlas.service.SearchURL(pipeline); 
    

    SubscriptionKeyCredential crea un SubscriptionKeyCredentialPolicy para autenticar las solicitudes HTTP en Azure Maps con la clave de suscripción.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() toma la directiva SubscriptionKeyCredential y crea una instancia de canalización.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. searchURL representa una dirección URL para las operaciones Search de Azure Maps.The searchURL represents a URL to Azure Maps Search operations.

  2. A continuación, agregue el siguiente bloque de script para compilar la consulta de búsqueda.Next add the following script block to build the search query. Este fragmento de código usa Fuzzy Search Service, que es una API de búsqueda básica de Search Service.It uses the Fuzzy Search Service, which is a basic search API of the Search Service. Fuzzy Search Service controla la mayoría de las entradas aproximadas como, por ejemplo, direcciones, lugares y puntos de interés (POI).Fuzzy Search Service handles most fuzzy inputs like addresses, places, and points of interest (POI). Este código busca las gasolineras más cercanas en un radio especificado de las coordenadas de latitud y longitud proporcionadas.This code searches for nearby Gasoline Stations within the specified radius of the provided latitude and longitude. Después se extrae una colección de características GeoJSON de la respuesta con el método geojson.getFeatures() y se agregan al origen de datos, lo cual provoca que los datos se representen automáticamente en el mapa mediante la capa de símbolos.A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source, which automatically results in the data being rendered on the map via the symbol layer. La última parte del script permite establecer la vista de cámaras del mapa mediante el rectángulo delimitador de los resultados con la propiedad setCamera de Map.The last part of the script sets the maps camera view using the bounding box of the results using the Map's setCamera property.

    var query =  'gasoline-station';
    var radius = 9000;
    var lat = 47.64452336193245;
    var lon = -122.13687658309935;
    
    searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
        limit: 10,
        lat: lat,
        lon: lon,
        radius: radius
    }).then((results) => {
    
        // Extract GeoJSON feature collection from the response and add it to the datasource
        var data = results.geojson.getFeatures();
        datasource.add(data);
    
        // set camera to bounds to show the results
        map.setCamera({
            bounds: data.bbox,
            zoom: 10
        });
    });
    
  3. Guarde el archivo MapSearch.html y actualice el explorador.Save the MapSearch.html file and refresh your browser. Ahora verá que el mapa se centra en Seattle y que aparecen marcadas con chinchetas azules redondas las ubicaciones de las gasolineras de la zona.You should now see that the map is centered on Seattle with round-blue pins marking the locations of gasoline stations in the area.

    Visualización del mapa con los resultados de la búsqueda

  4. Puede ver los datos sin procesar que está representando el mapa especificando la siguiente solicitud HTTPRequest en el explorador.You can see the raw data that the map is rendering by entering the following HTTPRequest in your browser. Reemplace <su clave de Azure Maps> por la clave principal.Replace <Your Azure Maps Key> with your primary key.

    https://atlas.microsoft.com/search/poi/json?api-version=2&query=gasoline%20station&subscription-key=<subscription-key>&lat=47.6292&lon=-122.2337&radius=100000
    

En este momento, la página MapSearch puede mostrar las ubicaciones de los puntos de interés que se devuelven en una consulta de búsqueda aproximada.At this point, the MapSearch page can display the locations of points of interest that are returned from a fuzzy search query. Vamos a agregar algunas funcionalidades interactivas y más información sobre las ubicaciones.Let's add some interactive capabilities and more information about the locations.

Adición de datos interactivosAdd interactive data

La asignación que hemos hecho hasta ahora solo examina los datos de latitud o longitud de los resultados de búsqueda.The map that we've made so far only looks at the longitude/latitude data for the search results. Sin embargo, si examina el archivo JSON sin formato que devuelve el servicio Search de Azure Maps, verá que contiene información adicional sobre cada gasolinera, incluidos el nombre y la dirección postal.If you look at the raw JSON that the Maps Search service returns, however, you see that it contains additional information about each gas station, including the name and street address. Puede incorporar esos datos al mapa con cuadros emergentes interactivos.You can incorporate that data into the map with interactive popup boxes.

  1. Agregue las siguientes líneas de código en el controlador de eventos ready del mapa después del código para consultar el servicio de búsquedas aproximadas.Add the following lines of code in the map ready event handler after the code to query the fuzzy search service. Esto creará una instancia de un elemento emergente y agregará un evento mouseover a la capa de símbolos.This will create an instance of a Popup and add a mouseover event to the symbol layer.

    //Create a popup but leave it closed so we can update it and display it later.
    popup = new atlas.Popup();
    
    //Add a mouse over event to the result layer and display a popup when this event fires.
    map.events.add('mouseover', resultLayer, showPopup);
    

    La API sup proporciona una ventana de información anclada en la posición requerida en el mapa.The API sup provides an information window anchored at the required position on the map.

  2. En la etiqueta script, después de la función GetMap, agregue el siguiente código para mostrar la información de resultados del evento mouseover en el elemento emergente.In the script tag, after the GetMap function, add the following code to show the moused over result information in the popup.

    function showPopup(e) {
        //Get the properties and coordinates of the first shape that the event occured on.
    
        var p = e.shapes[0].getProperties();
        var position = e.shapes[0].getCoordinates();
    
        //Create HTML from properties of the selected result.
        var html = ['<div style="padding:5px"><div><b>', p.poi.name,
            '</b></div><div>', p.address.freeformAddress,
            '</div><div>', position[1], ', ', position[0], '</div></div>'];
    
        //Update the content and position of the popup.
        popup.setPopupOptions({
            content: html.join(''),
            position: position
        });
    
        //Open the popup.
        popup.open(map);
    }
    
  3. Guarde el archivo y actualice el explorador.Save the file and refresh your browser. Ahora el mapa del explorador muestra los cuadros emergentes de información cuando se mantiene el mouse sobre cualquiera de las chinchetas de búsqueda.Now the map in the browser shows information pop-ups when you hover over any of the search pins.

    Control de mapa y Search Service de Azure

Pasos siguientesNext steps

En este tutorial aprendió lo siguiente:In this tutorial, you learned how to:

  • Crear una cuenta con Azure MapsCreate an account with Azure Maps
  • Obtención de la clave principal de una cuentaGet the primary key for your account
  • Crear una nueva página web mediante la API de Control de mapaCreate new web page using Map Control API
  • Uso de Search Service para encontrar un punto de interés cercanoUse Search Service to find nearby point of interest

En el siguiente tutorial se muestra cómo visualizar una ruta entre dos ubicaciones.The next tutorial demonstrates how to display a route between two locations.