Исчезают Яндекс-карты при ресайзе экрана?
На сайте есть Табы - 3 вкладки. В каждой вкладке есть своя Яндекс-карта со своими координатами, кликаешь по Табу - меняется Карта.
Но вот такая штука - когда происходит хоть какое-то изменение размера экрана(по ширине или высоте) - ПРОПАДАЮТ все Карты, кроме активной, открытой в данный момент. Можете проверить сами, нажмите по какой-либо вкладке, немного измените размер экрана, и понажимайте на другие вкладки - Карт не будет.
Код: https://codepen.io/Vegan-AK/pen/WNmoKKW
Как решить эту проблему? Нашёл какую-то яндекс.функцию для решения проблем при ресайзе, но не понял как она работает, и куда её прописывать:
function ResizeMapFit() {
myMapDev.container.fitToViewport();
}
Дополнительно:
к примеру в обработчик для ResizeObserver, который будет следить за изменениями размера табов
типа такого в конец init():
const observer = new ResizeObserver(entries => mapArray.forEach(map => map.container.fitToViewport())); tabItems.forEach(node => observer.observe(node)); |
const observer = new ResizeObserver(entries => mapArray.forEach(map => map.container.fitToViewport())); tabItems.forEach(node => observer.observe(node));
но нужно будет переделать неактивные табы, т.к. ResizeObserver реагирует и на display: none;
- Спасибо большое. Я и так, и так попробовал, но display: none; тоже вроде всё работает
ResizeObserver это вроде такой js инструмент для отслеживания сужения DOM-элементов. Нужная вообще вещь, часто используется? - Danila232, ну если перезагрузка карты при переключении табов не мешает, то можно и display:none; оставить
как имя говорит, это отслеживатель изменения размеров элементов, подробности: https://developer.mozilla.org/en-US/docs/Web/API/R..., используется по необходимости, как например в картах, которые сами не умеют в такое
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему исчезновения Яндекс-карт при ресайзе экрана, можно использовать медиа-запросы в CSS. Медиа-запросы позволяют задавать различные стили для разных размеров экрана, что поможет адаптировать сайт к различным устройствам.
Прежде всего, убедитесь, что ваши Яндекс-карты обернуты в контейнер с правильными стилями, например:
<div class="map-container"> <!-- Ваш код для Яндекс-карт здесь --> </div><div class="map-container"> <!-- Ваш код для Яндекс-карт здесь --> </div>
Затем добавьте следующие стили в ваш CSS файл:
.map-container { position: relative; overflow: hidden; padding-bottom: 56.25%; /* Соотношение сторон 16:9 для адаптивности */ height: 0; } .map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Эти стили обеспечат правильное отображение Яндекс-карт на различных устройствах. Однако, если вы все еще сталкиваетесь с проблемой исчезновения карт при ресайзе экрана, можно добавить медиа-запросы для различных размеров экрана:
@media screen and (max-width: 768px) { .map-container { padding-bottom: 75%; /* Измените соотношение сторон для мобильных устройств */ } } @media screen and (max-width: 480px) { .map-container { padding-bottom: 100%; /* Измените соотношение сторон для устройств с маленькими экранами */ } }
Эти медиа-запросы позволят настроить отображение Яндекс-карт на разных устройствах, сохраняя их видимость при ресайзе экрана. Не забудьте также протестировать ваш сайт на различных устройствах, чтобы убедиться, что проблема была успешно решена.