Integrar la navegación paso a paso en una aplicación web puede mejorar significativamente la experiencia del usuario al proporcionar visualización de rutas en tiempo real y guías de navegación. La API de HERE Maps para JavaScript, combinada con el servicio HERE Routing v8, permite a los desarrolladores obtener rutas, mostrarlas en el mapa y animar dinámicamente el movimiento a lo largo de esa ruta.
Puedes hacer lo siguiente:
- Inicializar la API de HERE Maps para JavaScript en tu proyecto.
- Usar HERE Routing v8 para calcular una ruta de conducción entre dos puntos.
- Mostrar la ruta de manera incremental en el mapa.
- Animar un ícono de automóvil a lo largo de la ruta para simular movimiento.
- Ajustar la orientación (dirección) del automóvil a medida que avanza para lograr un efecto más realista.
A continuación te mostramos cómo comenzar.
- Inicialización del Mapa
Configuramos la API de HERE Maps para JavaScript con mosaicos vectoriales y controles de interfaz de usuario.
- HTML e Inclusión de Scripts
API de HERE Maps para JavaScript: Incluimos múltiples archivos de la API de HERE Maps para JavaScript (core, service, UI, events, harp), que proporcionan el mapa base, servicios de enrutamiento, controles de interfaz de usuario, interactividad del mapa y el motor de renderizado.
CSS y Diseño: Nos aseguramos de que el mapa ocupe toda la pantalla. También definimos un elemento #carIcon que será el marcador del vehículo. Este icono está posicionado de forma absoluta e inicialmente oculto.
Vista Responsiva: La etiqueta meta garantiza que el mapa se escale correctamente en dispositivos móviles.
- Inicialización del Mapa y la Plataforma
Inicialización de la Plataforma: Se crea un objeto H.service.Platform utilizando tu clave de API de HERE. Esto permite acceder a varios servicios de HERE, como Mapas y Routing.
engineType ‘HARP’: Especificamos el motor HARP para renderizar vectores, lo que permite un renderizado 3D de alta calidad en el mapa.
Creación del Mapa: Creamos una instancia de H.Map, vinculándola al elemento #map en el HTML. Configuramos un nivel de zoom inicial y una ubicación central (coordenadas de Berlín).
- Habilitación de Interacciones en el Mapa y Controles de Interfaz de Usuario
Eventos del Mapa y Comportamiento:
H.mapevents.MapEvents habilita el manejo de eventos del mapa, como mover (pan), hacer zoom y cambiar la inclinación (tilt).
H.mapevents.Behavior activa las interacciones predeterminadas del mapa, como arrastrar (dragging) y hacer zoom con pellizco (pinch zooming).
Controles de Interfaz de Usuario:
H.ui.UI.createDefault agrega elementos de interfaz de usuario predeterminados, como botones de zoom y barras de escala, a la interfaz del mapa.
- B) Cálculo de la Ruta
Utilizamos HERE Routing v8 para obtener una ruta en automóvil entre dos puntos.
- Definición de Parámetros de Routing y Llamada al Servicio de Routing
Parámetros de Routing:
Establecemos el modo de routing(rápido), el modo de transporte (automóvil), las coordenadas de origen y destino, y el tipo de retorno (polilínea) para obtener una geometría detallada de la ruta.
Servicio de Routing:
platform.getRoutingService(null, 8) accede a la API de HERE Routing v8.
Gestión de la Polilínea:
routePoints almacenará las coordenadas de la ruta, mientras que routeStrip es un H.geo.LineString que finalmente se convertirá en una polilínea en el mapa.
Referencia al Ícono del Automóvil:
Almacenamos el elemento DOM #carIcon para moverlo a lo largo de la ruta más tarde.
- Manejo de la Respuesta de Routing
Procesamiento de la Ruta: La respuesta de enrutamiento contiene secciones, cada una con una polilínea. Convertimos la polilínea en una lista de puntos de latitud/longitud.
Almacenamiento de Puntos de la Ruta: Insertamos estas coordenadas en routePoints.
Ajustar Límites del Mapa: Ajustamos la vista del mapa para mostrar toda la ruta.
Dibujar la Ruta Gradualmente: En lugar de mostrar toda la ruta de una vez, llamamos a drawRouteGradually() para animar el dibujo de la polilínea y el movimiento del vehículo.
- Dibujando la Ruta Gradualmente
Dibujo Incremental: Iteramos a través de cada punto en routePoints. Para cada punto:
- Lo añadimos a routeStrip.
- Eliminamos la antigua routeLine y creamos una nueva polilínea con el routeStrip actualizado.
- Movemos el icono del vehículo al punto actual mediante moveCar().
Temporización: setTimeout(drawNextSegment,100) establece un pequeño retraso entre la adición de puntos, creando una animación suave de «dibujado».
Si te interesó este paso a paso y quieres continuar aprendiendo, te invitamos a cargar tus datos en el siguiente formulario. Una vez enviado, nos pondremos en contacto contigo para proporcionarte toda la información y soporte necesarios para implementar esta solución en tu proyecto. ¡Estamos aquí para ayudarte!
En Marker te ayudamos a hacer tu negocio más productivo con las mejores tecnologías de ubicación. Conoce más sobre HERE y localización inteligente, agenda una reunión con nuestro equipo.