Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras en el mapa

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 09:33:39 -05:00
parent c0a476cdb8
commit bf9adf1d3a
4 changed files with 91 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/composables/useDirectionsRoute.ts
View File

@ -40,65 +40,46 @@ export function useDirectionsRoute() {
errorRuta.value = null;
try {
// Importar librerías necesarias de la nueva API
const { RoutesService } = await google.maps.importLibrary("routes") as any;
const routeService = new RoutesService();
const { DirectionsService } = await google.maps.importLibrary("routes") as any;
const directionsService = new DirectionsService();
// Límite de la API de Google Maps Routes: Origen, Destino, y hasta 25 intermediates
const maxPuntosPorChunk = 25;
const overlaps = 1;
const maxWaypoints = 23; // Google Directions limit is typically 25 including origin/dest
for (let i = 0; i < paradas.length - 1; i += (maxPuntosPorChunk - overlaps)) {
const chunk = paradas.slice(i, i + maxPuntosPorChunk);
for (let i = 0; i < paradas.length - 1; i += maxWaypoints) {
const chunk = paradas.slice(i, i + maxWaypoints + 1);
if (chunk.length < 2) break;
const origin = {
location: {
latLng: {
latitude: chunk[0]!.latitud,
longitude: chunk[0]!.longitud
}
}
};
const origin = { lat: chunk[0]!.latitud, lng: chunk[0]!.longitud };
const destination = { lat: chunk[chunk.length - 1]!.latitud, lng: chunk[chunk.length - 1]!.longitud };
const destination = {
location: {
latLng: {
latitude: chunk[chunk.length - 1]!.latitud,
longitude: chunk[chunk.length - 1]!.longitud
}
}
};
const intermediates = chunk.slice(1, -1).map(p => ({
location: {
latLng: {
latitude: p.latitud,
longitude: p.longitud
}
}
const waypoints = chunk.slice(1, -1).map(p => ({
location: new google.maps.LatLng(p.latitud, p.longitud),
stopover: true
}));
try {
const response = await routeService.computeRoutes({
origin,
destination,
intermediates,
travelMode: 'DRIVE' as any, // 'DRIVE' es el nuevo estandar en computeRoutes
routingPreference: 'TRAFFIC_UNAWARE' as any,
polylineQuality: 'HIGH_QUALITY' as any,
polylineEncoding: 'ENCODED_POLYLINE' as any,
const result = await new Promise<google.maps.DirectionsResult>((resolve, reject) => {
directionsService.route({
origin,
destination,
waypoints,
travelMode: google.maps.TravelMode.DRIVING
}, (response: google.maps.DirectionsResult | null, status: google.maps.DirectionsStatus) => {
if (status === google.maps.DirectionsStatus.OK && response) {
resolve(response);
} else {
reject(new Error(`Directions API failed: ${status}`));
}
});
});
if (response.routes && response.routes.length > 0) {
const route = response.routes[0];
if (route.polyline && route.polyline.encodedPolyline) {
const path = google.maps.geometry.encoding.decodePath(route.polyline.encodedPolyline);
if (result.routes && result.routes.length > 0) {
const route = result.routes[0];
if (route?.overview_path) {
const polyline = new google.maps.Polyline({
path: path,
path: route.overview_path,
map: map,
strokeColor: isPast ? '#9CA3AF' : '#FBBF24', // Gris para lo lejano, Amarillo para lo cercano
strokeColor: isPast ? '#9CA3AF' : '#FBBF24',
strokeWeight: isPast ? 4 : 6,
strokeOpacity: isPast ? 0.6 : 1.0,
icons: isPast ? [{
@ -107,15 +88,16 @@ export function useDirectionsRoute() {
repeat: '10px'
}] : []
});
registrarPolyline(polyline);
}
}
} catch (err: any) {
console.warn(`SIBU | Tramo ${i} falló con Routes API: `, err);
console.warn(`SIBU | Tramo ${i} falló con Directions API: `, err);
}
await delay(200);
if (i + maxWaypoints < paradas.length - 1) {
await delay(300);
}
}
} catch (err: any) {
errorRuta.value = `Error crítico al trazar la ruta: ${err.message || String(err)}`;