Блог

У меня есть карта Mapbox на странице, которая загружается в скользящую панель, управляемую jQuery.

Если я изменяю размер окна браузера и переключаю панель, карта часто появляется только частично, заполняя ее контейнер. Это известная проблема с API Mapbox GL.

Из их документации:

Если вы изначально скрываете свою карту с помощью чего-то вроде display:none и показываете ее динамически с помощью JavaScript, у нее могут возникнуть некоторые проблемы с отображением и корректным размером. Карта не может определить свой собственный размер, когда она скрыта со страницы, поскольку у нее нет размера в расчете браузера.

С помощью Mapbox GL JS вы можете вызвать map.resize() для обнаружения и изменения размера карты

Итак, мне нужно вызвать функцию Mapbox map.resize() из моего кода jQuery, когда открывается скользящая панель. Проблема в том, что я не могу заставить ее работать. Я пробовал следующее:

 1: $(map).trigger('resize');
2: $(window.map).resize();
3: $(window.map).trigger('resize');
as well as
4: $(window).trigger('resize');
  

Дело в том, что я не уверен в своем синтаксисе здесь и в правильном способе вызова функции, находящейся в другом скрипте, из jQuery. Я подтвердил, что объект ‘map’ является глобальным, так как ввод map.resize() непосредственно в консоль инструментов разработчика моего браузера работает [ie. исправлено отображение карты]. Кажется, я просто не могу заставить jQuery передать функцию.

Также странно, что $(window).trigger('resize') это не сработало, так как изменение размера окна браузера вручную также автоматически запускает функцию ‘map.resize ()’ [и исправляет рендеринг карты].

Редактировать:

Должен был упомянуть. Я сделал map объект доступным глобально с помощью: window.map = map; внутри mapbox.js сценарий и убедился, что mapbox.js скрипт загружается раньше, чем jQuery, но все равно никакой радости.

В конце концов мне удалось решить эту проблему. Проблема заключалась в том, что код, который я использовал для запуска перерисовки карты, был следующим:

 //inside jQuery map click function
$("#map").slideToggle(200);
$(window.map).resize();
  

Будучи немного новичком в jQuery, я [по-идиотски] предположил, что эти команды будут запускаться последовательно, но, конечно, slideToggle() анимация асинхронна. Поэтому jQuery вызывал функцию Mapbox resize() до того, как скользящая панель достигла своих конечных размеров. Таким образом, карта по умолчанию имеет резервный размер 400×300 пикселей

Все, что мне нужно было сделать, это вставить вызов Mapbox resize() в анонимную функцию, запускаемую после slidetoggle() завершения:

 $("#map").slideToggle(200, function() 
{
        $(window.map).resize();
});
  

По-прежнему существует небольшой визуальный сбой, заключающийся в том, что карта сначала отображается размером 400×300 пикселей, а затем быстро привязывается, чтобы заполнить ее контейнер. Но поскольку это было немного крайним случаем, зависящим от того, что пользователь изменил размер своего окна браузера между открытием и закрытием карты, я считаю, что это достаточно хорошо, чтобы считать это решенным.