Как отобразить карту листовки, когда она скрыта "display: none;" родитель

Я испытываю странное поведение при отображении карты листовки на моей странице. Обычно карта отображается как положено и работает хорошо. Однако я хочу отображать карту только тогда, когда происходит ошибка в формах, которые я обнаруживаю в JavaScript. Так что, если я установлю родителя <div id="map"> в display: none; и показывать его позже по мере необходимости, плитки не загружаются (или загружаются только частично и не продолжаются), и карта странным образом "смещается" (не по центру, как определено в js).

Я думаю, что, возможно, браузер не отображает элементы внутри display: none; родитель?

Я пытался скрыть карту с $(document).ready(...) функция, но это не имеет значения. То же самое поведение повторяется, как только я прячусь и показываю карту. Я проверил это на Firefox 44.0 и Chromium 48.0, и поведение соответствует.

Любой совет будет полезен. Это общее поведение для удаленно загружаемых элементов (ajax)?

Изменить 1:

Теперь я знаю решение и обходной путь (см. Ответы ниже), но я все еще не уверен, является ли это глобальным поведением для удаленно загружаемых элементов? Спасибо за любое объяснение.

Изменить 2:

Смотрите принятый ответ для объяснения.

Источник

3 ответа

Решение

Что происходит, так это то, что ваш L.Map Экземпляр не может правильно рассчитать его размеры из-за display:none Правило CSS. Если он не получает нужных размеров, он не знает, сколько плиток загрузить и как их разложить, он просто не загружает ни одной. XHR не имеет к этому никакого отношения. Карта не знает, что такое XHR, вот в чем проблема.

После того как вы переключились с display:none в display:block позвонить invalidateSize метод на вашем L.Map пример. Это заставит карту (пере) визуализировать:

Проверяет, изменился ли размер контейнера карты, и обновляет карту, если это так - вызывайте его после динамического изменения размера карты, также анимируя панорамирование по умолчанию. Если options.pan имеет значение false, панорамирование не будет выполняться. Если значение options.debounceMoveend равно true, оно будет задерживать событие moveend, чтобы оно не происходило часто, даже если метод вызывается много раз подряд.

http://leafletjs.com/reference.html

Источник

Другой обходной путь заключается в использовании opacity: 0; или же height: 0px; вместо display: none;

Источник

Обходное решение, кажется, заключается в том, чтобы скрыть карту только после загрузки страницы следующим образом:

$( window ).load(function () {
    $('#map').hide();
});

Таким образом, карта скрыта только после полной визуализации. Показывать это после этого с $('#map').show(); показать карту с загруженными плитками, что вы ожидаете без проблем.

Источник
Другие вопросы по тегам