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

fix(map): convert Google Maps object arrays to shallowRef to prevent deep reactivity proxies from breaking setMap(null) and causing memory leaks/ghost markers

Browse Source
This commit is contained in:
Johan Samudio
2026-03-04 12:32:37 -05:00
parent 9c7050436b
commit af8ddd34a6
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/composables/useMapState.ts
View File

@ -1,9 +1,12 @@
import { ref } from 'vue' import { ref, shallowRef, triggerRef } from 'vue'
const markers = ref<google.maps.Marker[]>([]) // PERFORMANCE FIX: Los objetos de Google Maps NUNCA deben ir en refs profundos (ref)
const polylines = ref<google.maps.Polyline[]>([]) // porque Vue intenta proxyficarlos ("deep reactivity") y rompe sus métodos internos
const infoWindows = ref<google.maps.InfoWindow[]>([]) // provocando un fallo silencioso en setMap(null). Usamos shallowRef.
const circles = ref<google.maps.Circle[]>([]) const markers = shallowRef<google.maps.Marker[]>([])
const polylines = shallowRef<google.maps.Polyline[]>([])
const infoWindows = shallowRef<google.maps.InfoWindow[]>([])
const circles = shallowRef<google.maps.Circle[]>([])
// Callback para sincronización externa (ej. useGoogleMaps globalOverlays) // Callback para sincronización externa (ej. useGoogleMaps globalOverlays)
const onLimpiarCallback = ref<(() => void) | null>(null) const onLimpiarCallback = ref<(() => void) | null>(null)
@ -11,25 +14,37 @@ const onLimpiarCallback = ref<(() => void) | null>(null)
export const useMapState = () => { export const useMapState = () => {
const registrarMarker = (marker: any) => { const registrarMarker = (marker: any) => {
if (marker) markers.value.push(marker as google.maps.Marker) if (marker) {
markers.value.push(marker as google.maps.Marker)
triggerRef(markers)
}
return marker return marker
} }
// Registrar una polyline // Registrar una polyline
const registrarPolyline = (polyline: google.maps.Polyline) => { const registrarPolyline = (polyline: google.maps.Polyline) => {
if (polyline) polylines.value.push(polyline) if (polyline) {
polylines.value.push(polyline)
triggerRef(polylines)
}
return polyline return polyline
} }
// Registrar un circle // Registrar un circle
const registrarCircle = (circle: google.maps.Circle) => { const registrarCircle = (circle: google.maps.Circle) => {
if (circle) circles.value.push(circle) if (circle) {
circles.value.push(circle)
triggerRef(circles)
}
return circle return circle
} }
// Registrar un InfoWindow // Registrar un InfoWindow
const registrarInfoWindow = (infoWindow: google.maps.InfoWindow) => { const registrarInfoWindow = (infoWindow: google.maps.InfoWindow) => {
if (infoWindow) infoWindows.value.push(infoWindow) if (infoWindow) {
infoWindows.value.push(infoWindow)
triggerRef(infoWindows)
}
return infoWindow return infoWindow
} }