Creación de una búsqueda interactiva de mapas mediante Azure MapsCreate an interactive search map by using Azure Maps

En este artículo se muestran las funcionalidades de Azure Maps para crear un mapa que dé a los usuarios una experiencia de búsqueda interactiva.This article demonstrates the capabilities of Azure Maps to create a map that gives users an interactive search experience. Le guía por estos pasos básicos:It walks you through these basic steps:

  • Cree su propia cuenta de Azure Maps.Create your own Azure Maps account.
  • Obtenga la clave de cuenta que se usará en la aplicación web de demostración.Get your account key to use in the demo web application.

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.

Creación de una cuenta y obtención de la claveCreate an account and get your key

  1. En la esquina superior izquierda de Azure Portal, seleccione Crear un recurso.In the upper-left corner of the Azure portal, select Create a resource.

  2. En el campo Buscar en Marketplace, escriba Maps.In the Search the Marketplace box, enter Maps.

  3. En Resultados, seleccione Maps.From the Results, select Maps. Haga clic en el botón Crear que aparece debajo del mapa.Select the Create button that appears below the map.

  4. En la página Crear una cuenta de Azure Maps, escriba los siguientes valores:On the Create Azure Maps Account page, enter the following values:

    • El nombre de la nueva cuenta.The Name of your new account.

    • La suscripción que quiere usar para esta cuenta.The Subscription that you want to use for this account.

    • El Grupo de recursos para esta cuenta.The Resource group for this account. Puede elegir Crear nuevo o Usar existente para el grupo de recursos.You might choose to Create new or Use existing resource group.

    • Seleccione el plan de tarifa que prefiera.Select the Pricing Tier of your choice.

    • Lea las secciones Licencia y Declaración de privacidad.Read the License and Privacy Statement. Active la casilla para aceptar los términos.Select the check box to accept the terms.

    • Finalmente, seleccione el botón Crear.Finally, select the Create button.

      Creación de una cuenta de Azure Maps en el portal

  5. Una vez que la cuenta se ha creado correctamente, ábrala y busque la sección de configuración del menú de la cuenta.After your account is successfully created, open it and find the settings section of the account menu. Haga clic en Claves para ver las claves principal y secundaria de la cuenta de Azure Maps.Select Keys to view the primary and secondary keys for your Azure Maps account. Copie el valor de la clave principal en el Portapapeles local para usarlo en la sección siguiente.Copy the Primary Key value to your local clipboard to use in the following section.

Descarga de la aplicaciónDownload the application

  1. Descargue o copie el contenido del archivo interactiveSearch.html.Download or copy the contents of the file interactiveSearch.html.
  2. Guarde el contenido de este archivo localmente como AzureMapDemo.html.Save the contents of this file locally as AzureMapDemo.html. Ábralo en un editor de texto.Open it in a text editor.
  3. Busque la cadena <Your Azure Maps Key>.Search for the string <Your Azure Maps Key>. Reemplácela por el valor de Clave principal de la sección anterior.Replace it with the Primary Key value from the preceding section.

Abrir la aplicaciónOpen the application

  1. Abra el archivo AzureMapDemo.html en un explorador de su preferencia.Open the file AzureMapDemo.html in a browser of your choice.

  2. Observe el mapa que se muestra de la Ciudad de Los Ángeles.Observe the map shown of the City of Los Angeles. Acerque y aleje para ver de qué manera el mapa se representa automáticamente con más o menos información según el nivel de zoom.Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. Cambie el centro predeterminado del mapa.Change the default center of the map. En el archivo AzureMapDemo.html, busque la variable denominada center.In the AzureMapDemo.html file, search for the variable named center. Reemplace el par de valores de longitud y latitud de esta variable con los nuevos valores [-74.0060, 40.7128].Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. Guarde el archivo y actualice el explorador.Save the file and refresh your browser.

  4. Pruebe la experiencia de búsqueda interactiva.Try out the interactive search experience. En el cuadro de búsqueda de la esquina superior izquierda de la aplicación web de demostración, busque restaurants.In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. Mueva el mouse sobre la lista de direcciones y ubicaciones que aparecen debajo del cuadro de búsqueda.Move your mouse over the list of addresses and locations that appear below the search box. Observe cómo el correspondiente alfiler en el mapa muestra información sobre esa ubicación.Notice how the corresponding pin on the map pops out information about that location. Para proteger la privacidad de empresas privadas, se muestran nombres y direcciones ficticios.For privacy of private businesses, fictitious names and addresses are shown.

    Aplicación web de búsqueda interactiva

Limpieza de recursosClean up resources

Los tutoriales incluyen detalles sobre cómo usar y configurar Azure Maps con su cuenta.The tutorials detail how to use and configure Azure Maps with your account. Si tiene pensado seguir con los tutoriales, no elimine los recursos que se crearon con este inicio rápido.Don't clean up the resources created in this quickstart if you plan to continue to the tutorials. Si no tiene pensado continuar, siga estos pasos para eliminar los recursos:If you don't plan to continue, take these steps to clean up the resources:

  1. Cierre el explorador donde se ejecuta la aplicación web AzureMapDemo.html.Close the browser that runs the AzureMapDemo.html web application.
  2. Seleccione Todos los recursos en el menú izquierdo de Azure Portal.From the left menu in the Azure portal, select All resources. A continuación, seleccione la cuenta de Azure Maps.Then select your Azure Maps account. En la parte superior de la hoja Todos los recursos, seleccione Eliminar.At the top of the All resources blade, select Delete.

Pasos siguientesNext steps

En este inicio rápido, creó una cuenta de Azure Maps y una aplicación de demostración.In this quickstart, you created your Azure Maps account and created a demo app. Eche un vistazo a los siguientes tutoriales para obtener información sobre Azure Maps:Take a look at the following tutorials to learn about Azure Maps:

Para ver más ejemplos de código y obtener una experiencia de codificación interactiva, consulte estas guías:For more code examples and an interactive coding experience, see these guides: