From 8e75f24b1e2e5609d1dfcd67f44bd04236c6b7b0 Mon Sep 17 00:00:00 2001 From: Hanzo_dev <2002samudiojohan@gmail.com> Date: Fri, 27 Feb 2026 22:34:08 -0500 Subject: [PATCH] fix: correct Routes API service usage and fix bus stops missing markers --- .../src/composables/useDirectionsRoute.ts | 5 +- frontend/src/composables/useGoogleMaps.ts | 5 +- frontend/src/composables/useParadaCercana.ts | 5 +- frontend/src/views/MapView.vue | 68 ++++++++++--------- 4 files changed, 45 insertions(+), 38 deletions(-) diff --git a/frontend/src/composables/useDirectionsRoute.ts b/frontend/src/composables/useDirectionsRoute.ts index 32918b9..2815492 100644 --- a/frontend/src/composables/useDirectionsRoute.ts +++ b/frontend/src/composables/useDirectionsRoute.ts @@ -41,7 +41,8 @@ export function useDirectionsRoute() { try { // Importar librerías necesarias de la nueva API - const { Route } = await google.maps.importLibrary("routes") as any; + const { RoutesService } = await google.maps.importLibrary("routes") as any; + const routeService = new RoutesService(); // Límite de la API de Google Maps Routes: Origen, Destino, y hasta 25 intermediates const maxPuntosPorChunk = 25; @@ -79,7 +80,7 @@ export function useDirectionsRoute() { })); try { - const response = await Route.computeRoutes({ + const response = await routeService.computeRoutes({ origin, destination, intermediates, diff --git a/frontend/src/composables/useGoogleMaps.ts b/frontend/src/composables/useGoogleMaps.ts index f5b3210..07cd880 100644 --- a/frontend/src/composables/useGoogleMaps.ts +++ b/frontend/src/composables/useGoogleMaps.ts @@ -417,7 +417,8 @@ export function useGoogleMaps() { try { // Cargar ruta - const { Route } = await google.maps.importLibrary("routes") as any; + const { RoutesService } = await google.maps.importLibrary("routes") as any; + const routeService = new RoutesService(); const tamañoChunk = 25; @@ -451,7 +452,7 @@ export function useGoogleMaps() { })); try { - const response = await Route.computeRoutes({ + const response = await routeService.computeRoutes({ origin, destination, intermediates, diff --git a/frontend/src/composables/useParadaCercana.ts b/frontend/src/composables/useParadaCercana.ts index 442ebe3..bd0ca6b 100644 --- a/frontend/src/composables/useParadaCercana.ts +++ b/frontend/src/composables/useParadaCercana.ts @@ -56,11 +56,12 @@ export function useParadaCercana() { let mejorRutaPuntos: google.maps.LatLng[] = []; try { - const { Route } = await google.maps.importLibrary("routes") as any; + const { RoutesService } = await google.maps.importLibrary("routes") as any; + const routeService = new RoutesService(); for (const stop of top5) { try { - const response = await Route.computeRoutes({ + const response = await routeService.computeRoutes({ origin: { location: { latLng: { diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue index 1c51d5b..ba70f51 100644 --- a/frontend/src/views/MapView.vue +++ b/frontend/src/views/MapView.vue @@ -406,41 +406,44 @@ function clearMapMarkers() { } async function updateMapMarkers() { - if (!isLoaded.value || !map.value) return; + if (!isLoaded.value || !map.value || isUpdatingMarkers.value) return; + isUpdatingMarkers.value = true; const currentRequestRouteId = routeStore.selectedRouteId; const stops = [...routeStore.selectedRouteStops]; - if (!currentRequestRouteId || stops.length === 0) { - clearMapMarkers(); - return; - } - - const selectedRouteObj = routeStore.allRoutes.find(r => r.id === currentRequestRouteId) || { id: currentRequestRouteId, short_name: currentRequestRouteId }; - - // Llamar al procesador de flujo principal, lo cual limpia el mapa y centra. - await procesarSeleccionDeRuta(selectedRouteObj, stops as BusStop[], map.value); - - // ⛔ ABORTAR SI EL USUARIO LIMPIÓ EL MAPA MIENTRAS DIBUJÁBAMOS - if (routeStore.selectedRouteId !== currentRequestRouteId) { - console.log('Abortando dibujado de paradas (la ruta fue limpiada o cambiada)'); - return; - } + try { + if (!currentRequestRouteId || stops.length === 0) { + clearMapMarkers(); + return; + } + + const selectedRouteObj = routeStore.allRoutes.find(r => r.id === currentRequestRouteId) || { id: currentRequestRouteId, short_name: currentRequestRouteId }; + + // Llamar al procesador de flujo principal, lo cual limpia el mapa y centra. + await procesarSeleccionDeRuta(selectedRouteObj, stops as BusStop[], map.value); + + // ⛔ ABORTAR SI EL USUARIO LIMPIÓ EL MAPA MIENTRAS DIBUJÁBAMOS + if (routeStore.selectedRouteId !== currentRequestRouteId) { + console.log('Abortando dibujado de paradas (la ruta fue limpiada o cambiada)'); + return; + } - // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa - const { paradaCercana } = useParadaCercana(); - - stops.forEach(stop => { - // Evitar sobre dibujar si es la cercana (useFlujoPrincipal ya se encargó) - if (paradaCercana.value && stop.id === paradaCercana.value.id) return; - - addCleanMarker( - { lat: stop.latitude, lng: stop.longitude }, - stop.name, - 'normal', - () => handleBusStopClick(stop) - ); - }); + // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa + stops.forEach(stop => { + // Evitar sobre dibujar si es la cercana (useFlujoPrincipal ya se encargó) + if (paradaCercana.value && stop.id === paradaCercana.value.id) return; + + addCleanMarker( + { lat: stop.latitude, lng: stop.longitude }, + stop.name, + 'normal', + () => handleBusStopClick(stop) + ); + }); + } finally { + isUpdatingMarkers.value = false; + } } function updateMarkersStyles() { @@ -679,8 +682,9 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target // 2. Trazar línea de puntos verde siguiendo RED VIAL PRINCIPAL try { - const { Route } = await google.maps.importLibrary("routes") as any; - const response = await Route.computeRoutes({ + const { RoutesService } = await google.maps.importLibrary("routes") as any; + const routeService = new RoutesService(); + const response = await routeService.computeRoutes({ origin: { location: { latLng: { latitude: origin.lat, longitude: origin.lng }