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

chore: migrate Google Maps to Routes API and clean up deprecated code

Browse Source
This commit is contained in:
Johan Samudio
2026-02-27 22:15:58 -05:00
parent 8084032f25
commit d73926cd77
5 changed files with 257 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/src/views/MapView.vue
View File

@ -642,7 +642,7 @@ function drawInternalWalkingRoute(targetStop: BusStop, originOverride?: { lat: n
}
}
function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop: BusStop) {
async function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop: BusStop) {
// 1. Limpiar pulso anterior si existe
if (optimalStopPulse.value) {
if (typeof optimalStopPulse.value.setMap === 'function') {
@ -678,58 +678,71 @@ function calculateWalkingPath(origin: { lat: number, lng: number }, targetStop:
}
// 2. Trazar línea de puntos verde siguiendo RED VIAL PRINCIPAL
const directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: origin,
destination: { lat: targetStop.latitude, lng: targetStop.longitude },
travelMode: google.maps.TravelMode.DRIVING,
}, (dirResult, dirStatus) => {
if (dirStatus === 'OK' && dirResult && dirResult.routes && dirResult.routes[0]) {
const route = dirResult.routes[0];
const leg = route.legs?.[0];
try {
const { Route } = await google.maps.importLibrary("routes") as any;
const response = await Route.computeRoutes({
origin: {
location: {
latLng: { latitude: origin.lat, longitude: origin.lng }
}
},
destination: {
location: {
latLng: { latitude: targetStop.latitude, longitude: targetStop.longitude }
}
},
travelMode: 'DRIVE',
routingPreference: 'TRAFFIC_UNAWARE',
polylineQuality: 'HIGH_QUALITY',
polylineEncoding: 'ENCODED_POLYLINE',
});
// Guardar info de navegación (ETA y Distancia) (Retirado a favor de ETA Card / Parada Cercana Banner)
if (leg) {
// console.log('Distancia', leg.distance?.text);
}
if (walkingPolyline.value) walkingPolyline.value.setMap(null);
if (walkingPolylineBorder.value) walkingPolylineBorder.value.setMap(null);
if (response.routes && response.routes.length > 0) {
const route = response.routes[0];
const { registrarPolyline: regPoly } = useMapState();
if (route.polyline && route.polyline.encodedPolyline) {
const path = google.maps.geometry.encoding.decodePath(route.polyline.encodedPolyline);
// CAPA 1: Borde blanco (Para dar contraste estilo Google Maps)
walkingPolylineBorder.value = new google.maps.Polyline({
path: route.overview_path,
geodesic: true,
strokeColor: '#FFFFFF',
strokeOpacity: 0.9,
strokeWeight: 10, // Un poco más grueso para el borde
map: map.value,
zIndex: 5
});
regPoly(walkingPolylineBorder.value);
if (walkingPolyline.value) walkingPolyline.value.setMap(null);
if (walkingPolylineBorder.value) walkingPolylineBorder.value.setMap(null);
const { registrarPolyline: regPoly } = useMapState();
// CAPA 2: Línea Indigo Central (La ruta principal)
walkingPolyline.value = new google.maps.Polyline({
path: route.overview_path,
geodesic: true,
strokeColor: '#4285F4', // Azul Google Maps
strokeOpacity: 1.0,
strokeWeight: 5,
map: map.value,
zIndex: 10
});
regPoly(walkingPolyline.value);
// CAPA 1: Borde blanco (Para dar contraste estilo Google Maps)
walkingPolylineBorder.value = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FFFFFF',
strokeOpacity: 0.9,
strokeWeight: 10,
map: map.value,
zIndex: 5
});
regPoly(walkingPolylineBorder.value);
// Ajustar zoom para mostrar toda la ruta de caminata
if (map.value) {
const bounds = new google.maps.LatLngBounds();
route.overview_path.forEach(p => bounds.extend(p));
map.value.fitBounds(bounds, { top: 100, bottom: 200, left: 50, right: 50 });
// CAPA 2: Línea Indigo Central (La ruta principal)
walkingPolyline.value = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#4285F4', // Azul Google Maps
strokeOpacity: 1.0,
strokeWeight: 5,
map: map.value,
zIndex: 10
});
regPoly(walkingPolyline.value);
// Ajustar zoom para mostrar toda la ruta de caminata
if (map.value) {
const bounds = new google.maps.LatLngBounds();
path.forEach(p => bounds.extend(p));
map.value.fitBounds(bounds, { top: 100, bottom: 200, left: 50, right: 50 });
}
}
}
});
} catch (error) {
console.warn('SIBU | Error trazando ruta a pie con Routes API:', error);
}
}
</script>