Inicio rápido: Creación de un mapa con búsqueda interactiva con Azure Maps

En este inicio rápido, aprenderá a usar Azure Maps para crear un mapa que proporcione a los usuarios una experiencia de búsqueda interactiva. Le guía por estos pasos básicos:

• Cree su propia cuenta de Azure Maps.
• Obtenga la clave principal que se usará en la aplicación web de demostración.
• Descargue y abra la aplicación del mapa de demostración.

En este inicio rápido se usa el SDK web de Azure Maps, pero el servicio Azure Maps se puede usar con cualquier control de mapa, como estos populares controles de mapa de código abierto para los que el equipo de Azure Mapas ha creado complementos.

Requisitos previos

• Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

• Inicie sesión en Azure Portal.

Crear una cuenta de Azure Maps

Cree una nueva cuenta de Azure Maps con los pasos siguientes:

1. En la esquina superior izquierda de Azure Portal, haga clic en Crear un recurso.

2. En el cuadro Buscar en el Marketplace, escriba Azure Maps.

3. En los Resultados, seleccione Azure Maps. Haga clic en el botón Crear que aparece debajo del mapa.

4. En la página Create Maps Account (Crear una cuenta de Azure Maps), escriba los siguientes valores:

   • La suscripción que quiere usar para esta cuenta.
   • El nombre del grupo de recursos para esta cuenta. Puede elegir Crear nuevo o Usar existente para el grupo de recursos.
   • El nombre de la nueva cuenta.
   • El Plan de tarifa de la cuenta.
   • Lea la licencia y la declaración de privacidad y active la casilla para aceptar los términos.
   • Haga clic en el botón Crear.

   

Obtención de la clave principal de una cuenta

Una vez que se haya creado correctamente la cuenta de Maps, recupere la clave principal que le permite consultar las API de Maps.

1. Abra su cuenta de Maps en el portal.
2. En la sección de configuración, seleccione Autenticación.
3. Copie la clave principal al Portapapeles. Guárdela localmente para usarla más adelante en este tutorial.

Descarga y actualización de la demostración de Azure Maps

1. Vaya a interactiveSearch.html. Copie el contenido del archivo.
2. Guarde el contenido de este archivo localmente como AzureMapDemo.html. Ábralo en un editor de texto.
3. Agregue el valor de Clave principal que obtuvo en la sección anterior.
   1. Comente todo el código de la función authOptions; este código se usa para la autenticación de Azure Active Directory.
   2. Quite la marca de comentario de las dos últimas líneas de la función authOptions; este código se usa para la autenticación de clave compartida, el enfoque que se usa en este inicio rápido.
   3. Reemplace <Your Azure Maps Key> por el valor de Clave principal de la sección anterior.

Apertura de la aplicación de demostración

1. Abra el archivo AzureMapDemo.html en un explorador de su preferencia.

2. Observe el mapa que se muestra de la Ciudad de Los Ángeles. 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.

3. Cambie el centro predeterminado del mapa. En el archivo AzureMapDemo.html, busque la variable denominada center. Reemplace el par de valores de longitud y latitud de esta variable con los nuevos valores [-74.0060, 40.7128] . Guarde el archivo y actualice el explorador.

4. Pruebe la experiencia de búsqueda interactiva. En el cuadro de búsqueda de la esquina superior izquierda de la aplicación web de demostración, busque restaurants.

5. Mueva el mouse sobre la lista de direcciones y ubicaciones que aparecen debajo del cuadro de búsqueda. Observe cómo el correspondiente alfiler en el mapa muestra información sobre esa ubicación. Para proteger la privacidad de empresas privadas, se muestran nombres y direcciones ficticios.

   

Limpieza de recursos

Si no tiene previsto continuar con los tutoriales, siga estos pasos para realizar la limpieza de recursos:

1. Cierre el explorador donde se ejecuta la aplicación web AzureMapDemo.html.
2. Vaya a la página de Azure Portal. En la página principal del portal, seleccione Todos los recursos. O bien, haga clic en el icono de menú en la esquina superior izquierda. Seleccione Todos los recursos.
3. Haga clic en la cuenta de Azure Maps. Haga clic en Eliminar en la parte superior de la página.

Para ver más ejemplos de código y obtener una experiencia de codificación interactiva, consulte estas guías:

• Búsqueda de una dirección mediante el servicio de búsqueda de Azure Maps
• Uso del Control de mapa de Azure Maps

Pasos siguientes

En esta guía de inicio rápido, ha creado la cuenta de Azure Maps y ha creado una aplicación de demostración. Consulte los siguientes tutoriales para más información sobre Azure Maps: