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

feat(UI): actualización de colores de ruta a amarillo y fix navegación transporte

Browse Source
This commit is contained in:
Johan Samudio
2026-02-27 10:57:42 -05:00
parent a8eaad7f35
commit b90eb83acb
12 changed files with 1624 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/composables/useGoogleMaps.ts
View File

@ -1,6 +1,7 @@
/** Composable for Google Maps integration */
import { ref, shallowRef, onMounted } from 'vue'
import { setOptions, importLibrary } from '@googlemaps/js-api-loader'
import { useMapState } from './useMapState'
const getApiKey = () => import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
@ -13,6 +14,11 @@ export function useGoogleMaps() {
const map = shallowRef<google.maps.Map | null>(null)
const isLoaded = ref(false)
const error = ref<string | null>(null)
const {
registrarMarker,
registrarPolyline,
limpiarMapa: limpiarTodoCentralizado
} = useMapState()
// Escuchar errores globales de autenticación de Google
if (typeof window !== 'undefined') {
@ -139,6 +145,8 @@ export function useGoogleMaps() {
icon: options?.icon,
})
registrarMarker(marker)
if (options?.onDragEnd) {
marker.addListener('dragend', () => {
const pos = marker.getPosition()
@ -192,6 +200,7 @@ export function useGoogleMaps() {
fontWeight: '900',
},
})
registrarMarker(marker)
if (onClick) {
marker.addListener('click', onClick)
@ -211,7 +220,7 @@ export function useGoogleMaps() {
function addCleanMarker(
position: { lat: number; lng: number },
title: string,
type: 'normal' | 'cercana' | 'origen' | 'destino',
type: 'normal' | 'cercana' | 'origen' | 'destino' | 'pasada',
onClick?: () => void
): google.maps.Marker | null {
if (!map.value) {
@ -221,25 +230,25 @@ export function useGoogleMaps() {
const iconoParadaNormal = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#3B82F6', // azul
fillColor: '#FBBF24', // amarillo
fillOpacity: 1,
strokeColor: '#FFFFFF', // borde blanco limpio
strokeColor: '#FFFFFF',
strokeWeight: 2,
scale: 7
};
const iconoParadaCercana = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#F59E0B', // amarillo/naranja
fillColor: '#F59E0B', // amarillo intenso
fillOpacity: 1,
strokeColor: '#FFFFFF',
strokeWeight: 3,
scale: 10
scale: 12
};
const iconoOrigen = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#10B981', // verde
fillColor: '#FBBF24', // amarillo
fillOpacity: 1,
strokeColor: '#FFFFFF',
strokeWeight: 3,
@ -248,18 +257,28 @@ export function useGoogleMaps() {
const iconoDestino = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#EF4444', // rojo
fillColor: '#D97706', // amarillo oscuro
fillOpacity: 1,
strokeColor: '#FFFFFF',
strokeWeight: 3,
scale: 10
};
const iconoParadaPasada = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#FDE68A', // amarillo tenue
fillOpacity: 0.5,
strokeColor: '#FFFFFF',
strokeWeight: 1,
scale: 5
};
const iconos = {
normal: iconoParadaNormal,
cercana: iconoParadaCercana,
origen: iconoOrigen,
destino: iconoDestino
destino: iconoDestino,
pasada: iconoParadaPasada
};
const marker = new google.maps.Marker({
@ -268,6 +287,7 @@ export function useGoogleMaps() {
title,
icon: iconos[type],
});
registrarMarker(marker);
if (onClick) {
const infoWindow = new google.maps.InfoWindow({
@ -352,6 +372,7 @@ export function useGoogleMaps() {
const overlay = new CustomOverlay(new google.maps.LatLng(position.lat, position.lng));
overlay.setMap(map.value);
registrarMarker(overlay);
// Track for cleanup
if (!globalOverlays.has(map.value)) {
@ -376,6 +397,7 @@ export function useGoogleMaps() {
strokeWeight: 5,
map: map.value,
})
registrarPolyline(polyline)
// Track in global overlay tracker
if (map.value) {
@ -483,6 +505,7 @@ export function useGoogleMaps() {
if (!map.value) {
return
}
limpiarTodoCentralizado()
clearAllOverlaysForMap(map.value)
}