Почему нужно дважды нажать на маркеры, чтобы всплывающие окна открылись в правильном положении (внутри карты-листовки) ⇐ Javascript

[Anonymous]

Эта часть кода должна управлять поведением всплывающих окон

Код: Выделить всё

if (isMobile) {
map.on('popupopen', function (e) {
const popup = e.popup;
const el = popup.getElement();

if (!el) { // Se l'elemento non è ancora disponibile, riprovare dopo un breve timeout
setTimeout(() => map.fire('popupopen', e), 50);
return;
}

const img = el.querySelector('.popup-image');
if (img && !img.complete) {
img.onload = () => adjustPopupPosition(popup);
img.onerror = () => adjustPopupPosition(popup); // Fallback anche in caso di errore caricamento
} else {
adjustPopupPosition(popup);
}

function adjustPopupPosition(popup) {
const el = popup.getElement();
if (!el) return; // Doppio controllo

const popupLatLng = popup.getLatLng();
const headerH = document.querySelector('#masthead')?.offsetHeight || 0;
const paddingTop = headerH + 30; // Aumentato il padding superiore a 30px

const popupPoint = map.latLngToContainerPoint(popupLatLng);
const popupWidth = el.offsetWidth;
const popupHeight = el.offsetHeight;

const popupLeft = popupPoint.x - (popupWidth / 2);
const popupRight = popupPoint.x + (popupWidth / 2);
const popupTop = popupPoint.y - (popupHeight + popup.options.popupAnchor[1]);
const popupBottom = popupPoint.y + 10; // Un piccolo padding aggiuntivo anche in basso

const mapContainerSize = map.getSize();
const mapContainerWidth = mapContainerSize.x;
const mapContainerHeight = mapContainerSize.y;

let dx = 0;
let dy = 0;

if (popupLeft < 0) {
dx = popupLeft - 10;
} else if (popupRight > mapContainerWidth) {
dx = popupRight - mapContainerWidth + 10;
}

if (popupTop < paddingTop) {
dy = popupTop - paddingTop - 20; // Aumentato ulteriormente lo spostamento verso il basso
} else if (popupBottom > mapContainerHeight) {
dy = popupBottom - mapContainerHeight + 10;
}

if (dx !== 0 || dy !== 0) {
map.panBy([dx, dy], { animate: true, duration: 0.5 });
// Forziamo un ricalcolo immediato dopo lo spostamento
setTimeout(() => map.invalidateSize(true), 100); // Passa true per ricalcolo completo
} else {
// Se non c'è stato pan, ma potrebbe esserci stato un problema di rendering
// Forziamo comunque un invalidateSize leggermente ritardato.
setTimeout(() => map.invalidateSize(true), 200);
}
}
});
}

вот полный код: https://pastebin.com/shWJEk0r, есть предложения? На данный момент на десктопе у меня нет особых проблем, реальная проблема на мобильном телефоне, поведение меня подводит к тому, что код не так уж и плох, но некоторые элементы имеют неправильную задержку или время, поэтому мне нужно дважды нажать на маркер, чтобы всплывающее окно появилось ВНУТРИ карты

Подробнее здесь: https://stackoverflow.com/questions/798 ... right-posi