Почему Яндекс-карты исчезают при изменении размера экрана?

Каким образом можно исправить ситуацию, когда при изменении размеров экрана пропадают все карты, кроме активной, открытой в данный момент на сайте с вкладками и Яндекс-картами? Я нашел функцию ResizeMapFit() для решения проблемы при изменении размеров экрана, но не могу разобраться, как ее использовать и куда ее нужно добавить. Можете помочь? Код: https://codepen.io/Vegan-AK/pen/WNmoKKW
  • 13 января 2024 г. 17:48
Ответы на вопрос 2
Ситуация, когда Яндекс-карты исчезают при изменении размера экрана, обычно связана с изменением размеров HTML-элемента, в который карта встроена. API карты может не осознавать, что размер контейнера изменился, и потребуется явное указание об этом изменении.

Функция `ResizeMapFit()` в вашем случае должна вызываться при каждом изменении размеров окна (или контейнера карты), чтобы она могла корректно обновить положение и размеры карты согласно новым значениям. Однако я не нашел эту функцию в вашем коде на CodePen. Скорее всего, вам потребуется произвести вызов метода `map.container.fitToViewport()` для объекта карты, чтобы она корректно обновлялась.

Давайте напишем функцию, которая будет вызываться при изменении размера окна:

```javascript
// Эта функция будет вызываться каждый раз при изменении размера окна.
function resizeAllMaps() {
    // Перебираем все экземпляры карт и обновляем их размеры.
    myMaps.forEach(function(map) {
        map.container.fitToViewport();
    });
}

// Добавляем слушатель на изменение размера окна.
window.addEventListener("resize", resizeAllMaps);
```

Где `myMaps` — это массив, содержащий все ваши экземпляры карт. Вам необходимо будет убедиться, что все карты, созданные в вашем приложении, добавляются в этот массив.

Теперь давайте посмотрим на ваш код и найдем, где добавить этот слушатель событий.

После краткого анализа вашего кода на CodePen, мне кажется, что вы не используете массив для хранения ваших карт. Вместо этого вы создаете индивидуальные карты внутри функций. Вам нужно будет изменить подход и создать глобальную структуру данных для хранения всех карт, чтобы иметь возможность вызывать `fitToViewport` для каждой из них.

Воспользуйтесь примером выше для добавления функции `resizeAllMaps` и слушателя события в ваш код, заменив `myMaps` на реальный массив ваших карт. После этого ваша проблема должна исчезнуть.

**Обратите внимание:** в зависимости от сложности вашего приложения и количества карт, вы можете столкнуться с проблемами производительности при слишком частом вызове этих функций при изменении размеров. Если это произойдет, возможно, потребуется добавить дебаунсинг, чтобы ограничить частоту обновлений.
типа такого в конец init() : 
но нужно будет переделать неактивные табы, т.к. ResizeObserver реагирует и на display: none;
Похожие вопросы