Inicio rápido: Creación de un mapa con búsqueda interactiva con Azure Maps
En este inicio rápido se muestra cómo 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 una clave de suscripción de Azure Maps para usarla 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:
Seleccione Crear un recurso en la esquina superior izquierda de Azure Portal.
Escriba Azure Maps en el cuadro Search services and Marketplace (Buscar en los servicios y el Marketplace).
Seleccione Azure Maps en la lista desplegable que aparece y, a continuación, seleccione el botón Crear.
En la página Create an Azure Maps Account resource (Crear un recurso de cuenta de Azure Maps), escriba los valores siguientes y seleccione el botón Crear:
- La suscripción que quiere usar para esta cuenta.
- El nombre del grupo de recursos para esta cuenta. Puede elegir Crear nuevo o Seleccionar existente para el grupo de recursos.
- El Nombre de la nueva cuenta de Azure Maps.
- El Plan de tarifa de la cuenta. Seleccione Gen2.
- Lea la licencia y la declaración de privacidad y marque la casilla para aceptar los términos.
Obtener la clave de suscripción de su cuenta
Una vez que se haya creado correctamente la cuenta de Azure Maps, recupere la clave de suscripción que le permitirá consultar las API de Maps.
- Abra su cuenta de Maps en el portal.
- En la sección de configuración, seleccione Autenticación.
- Copie la clave principal y guárdela localmente para usarla más adelante en este tutorial.
Nota:
En este inicio rápido se usa el enfoque de autenticación de Clave compartida solo para hacer la demostración, ya que el enfoque preferido para cualquier entorno de producción es utilizar la autenticación de [Microsoft Entra ID].
Descarga y actualización de la demostración de Azure Maps
- Copie el contenido del archivo: Interactive Search Quickstart.html.
- Guarde el contenido de este archivo localmente como AzureMapDemo.html. Ábralo en un editor de texto.
- Agregue el valor de Clave principal que obtuvo en la sección anterior.
- Incluya comentarios en todo el código de la función
authOptions; este código se usa para la autenticación de Microsoft Entra. - 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. - Reemplace
<Your Azure Maps Key>por el valor de la clave de suscripción de la sección anterior.
- Incluya comentarios en todo el código de la función
Apertura de la aplicación de demostración
Abra el archivo AzureMapDemo.html en un explorador de su preferencia.
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.
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.
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.
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
Importante
Los tutoriales que se enumeran en la sección Pasos siguientes describen cómo usar y configurar Azure Maps con su cuenta. Si tiene pensado seguir con los tutoriales, no elimine los recursos que se crearon con este inicio rápido.
Si no tiene previsto continuar con los tutoriales, siga estos pasos para realizar la limpieza de recursos:
- Cierre el explorador donde se ejecuta la aplicación web AzureMapDemo.html.
- Acceda a Azure Portal. Seleccione Todos los recursos en la página principal del portal o seleccione el icono de menú en la esquina superior izquierda y, luego, Todos los recursos.
- Seleccione la cuenta de Azure Maps y, a continuación, seleccione 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 estos artículos:
- 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 una cuenta de Azure Maps y una aplicación de demostración. Consulte los siguientes tutoriales para más información sobre Azure Maps: