fix: corrección de errores en mapa y filtros de horarios
This commit is contained in:
@ -323,67 +323,44 @@ export function useGoogleMaps() {
|
||||
}
|
||||
|
||||
function addHtmlMarker(
|
||||
position: { lat: number; lng: number },
|
||||
htmlContent: string,
|
||||
offset: { x: number; y: number } = { x: 0, y: 0 }
|
||||
position: { lat: number, lng: number },
|
||||
html: string,
|
||||
offset: { x: number, y: number } = { x: 0, y: 0 }
|
||||
) {
|
||||
if (!map.value) return null;
|
||||
|
||||
class CustomOverlay extends google.maps.OverlayView {
|
||||
private div: HTMLElement | null = null;
|
||||
private pos: google.maps.LatLng;
|
||||
const overlay = new google.maps.OverlayView();
|
||||
let container: HTMLDivElement | null = null;
|
||||
|
||||
constructor(pos: google.maps.LatLng) {
|
||||
super();
|
||||
this.pos = pos;
|
||||
overlay.onAdd = function () {
|
||||
container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.innerHTML = html;
|
||||
const panes = this.getPanes();
|
||||
if (panes) panes.overlayMouseTarget.appendChild(container);
|
||||
};
|
||||
|
||||
overlay.draw = function () {
|
||||
const projection = this.getProjection();
|
||||
if (!projection || !container) return;
|
||||
const pos = projection.fromLatLngToDivPixel(new google.maps.LatLng(position.lat, position.lng));
|
||||
if (pos) {
|
||||
container.style.left = (pos.x + offset.x) + 'px';
|
||||
container.style.top = (pos.y + offset.y) + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
onAdd() {
|
||||
const div = document.createElement('div');
|
||||
div.style.position = 'absolute';
|
||||
div.style.cursor = 'pointer';
|
||||
div.innerHTML = htmlContent;
|
||||
this.div = div;
|
||||
const panes = this.getPanes();
|
||||
panes?.overlayMouseTarget.appendChild(div);
|
||||
overlay.onRemove = function () {
|
||||
if (container && container.parentNode) {
|
||||
container.parentNode.removeChild(container);
|
||||
}
|
||||
container = null;
|
||||
};
|
||||
|
||||
draw() {
|
||||
const overlayProjection = this.getProjection();
|
||||
const point = overlayProjection.fromLatLngToDivPixel(this.pos);
|
||||
if (point && this.div) {
|
||||
this.div.style.left = (point.x + offset.x) + 'px';
|
||||
this.div.style.top = (point.y + offset.y) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
onRemove() {
|
||||
if (this.div) {
|
||||
try {
|
||||
// Safer element removal
|
||||
if (this.div.parentNode) {
|
||||
this.div.parentNode.removeChild(this.div);
|
||||
} else {
|
||||
this.div.remove();
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('CustomOverlay: element already removed or parent mismatch', e);
|
||||
}
|
||||
this.div = null;
|
||||
}
|
||||
}
|
||||
|
||||
setPosition(newPos: { lat: number; lng: number }) {
|
||||
this.pos = new google.maps.LatLng(newPos.lat, newPos.lng);
|
||||
this.draw();
|
||||
}
|
||||
}
|
||||
|
||||
const overlay = new CustomOverlay(new google.maps.LatLng(position.lat, position.lng));
|
||||
overlay.setMap(map.value);
|
||||
registrarMarker(overlay);
|
||||
registrarMarker(overlay as any);
|
||||
|
||||
// Track for cleanup
|
||||
// Track in global overlay tracker
|
||||
if (!globalOverlays.has(map.value)) {
|
||||
globalOverlays.set(map.value, new Set());
|
||||
}
|
||||
|
||||
@ -48,13 +48,18 @@ export const useMapState = () => {
|
||||
|
||||
// ⚠️ FUNCIÓN CRÍTICA: limpiar ABSOLUTAMENTE TODO del mapa
|
||||
const limpiarMapa = () => {
|
||||
// Eliminar markers
|
||||
console.log(`SIBU | Iniciando limpieza de ${markers.value.length} markers, ${renderers.value.length} renderers, ${polylines.value.length} polylines...`)
|
||||
|
||||
// Eliminar markers y overlays HTML
|
||||
markers.value.forEach(m => {
|
||||
try {
|
||||
if (m && typeof m.setMap === 'function') m.setMap(null)
|
||||
if (m && typeof (m as any).remove === 'function') (m as any).remove() // para HTML markers custom
|
||||
if (m && google?.maps?.event?.clearInstanceListeners) {
|
||||
google.maps.event.clearInstanceListeners(m)
|
||||
if (m) {
|
||||
if (typeof m.setMap === 'function') m.setMap(null);
|
||||
if (typeof (m as any).remove === 'function') (m as any).remove();
|
||||
if (typeof (m as any).onRemove === 'function') (m as any).onRemove();
|
||||
if (google?.maps?.event?.clearInstanceListeners) {
|
||||
google.maps.event.clearInstanceListeners(m);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Error limpiando marker', e)
|
||||
@ -65,8 +70,10 @@ export const useMapState = () => {
|
||||
// Eliminar renderers de Directions
|
||||
renderers.value.forEach(r => {
|
||||
try {
|
||||
if (r && typeof r.setMap === 'function') r.setMap(null)
|
||||
if (r && typeof r.setDirections === 'function') r.setDirections({ routes: [] } as any)
|
||||
if (r) {
|
||||
if (typeof r.setMap === 'function') r.setMap(null);
|
||||
if (typeof r.setDirections === 'function') r.setDirections({ routes: [] } as any);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Error limpiando renderer', e)
|
||||
}
|
||||
@ -93,7 +100,7 @@ export const useMapState = () => {
|
||||
})
|
||||
infoWindows.value = []
|
||||
|
||||
// Eliminar circles (pulso de ubicación) // Added custom HTML markers too since they often act as circles
|
||||
// Eliminar circles
|
||||
circles.value.forEach(c => {
|
||||
try {
|
||||
if (c && typeof c.setMap === 'function') c.setMap(null)
|
||||
@ -106,7 +113,9 @@ export const useMapState = () => {
|
||||
|
||||
// Ejecutar callback de limpieza externa si existe
|
||||
if (onLimpiarCallback.value) {
|
||||
try { onLimpiarCallback.value() } catch (e) {
|
||||
try {
|
||||
onLimpiarCallback.value()
|
||||
} catch (e) {
|
||||
console.warn('Error en callback de limpieza externa', e)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user