Вопрос по twitter-bootstrap, javascript, css – Карта листовок не отображается должным образом внутри панели с вкладками

49

Я пытаюсь использовать Leaflet.js для отображения карты на панели с вкладками из Twitter Bootstrap, но веду себя странно:

Когда я нажимаю на вкладку, содержащую панель, поверх карты появляется серый слой. Если я перетаскиваю карту, я вижу другие плитки, но не начальные.

Еще более странным является то, что если я изменяю размер браузера, он внезапно работает отлично, пока я снова не перезагружаюсь, поэтому я предполагаю, что это проблема с CSS, но я не могу найти проблему.

Кроме того, размещение карты за пределами панели с вкладками прекрасно работает.

Я тестировал в Firefox и Chrome, и оба имеют одинаковую проблему.

Я создал тест в jsfiddle, чтобы увидеть его "вживую":http://jsfiddle.net/jasalguero/C7Rp8/1/

Любая помощь очень ценится!

Ваш Ответ

2   ответа
18

поэтому предыдущие ответы будут работать с:

$("body").on("shown.bs.tab", "#link3", function() {
    map.invalidateSize(false);
});

Ссылка: Вкладки начальной загрузки

51

но он работает (по крайней мере, в jsFiddle)http: //jsfiddle.net/C7Rp8/4

Идея из Карт Google состоит в том, чтобы "изменить размер" или "перерисовать" карту при изменении размера ее контейнера div.

Изменения, которые я сделал:

add idlink3 на маленькую вкладку в HTML

<a href="#lC" data-toggle="tab" id="link3">tab3</a>

добавить слушателя этой вкладки внутри$(function() {

$("body").on('shown','#link3', function() { 
  L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});

Строка requestAniMFrame взята из trackResize в leaflet.js

Обновление комментариев: Привет! Я использовал map.invalidateSize (false); вместо L.Util.requestAnimFrame (... и это тоже, похоже, работает. Просто подумал, что я укажу на это. Хотя отличный ответ! - Герр Грампс

Это отлично сработало! Так что это общая проблема со всеми картами, загруженными в скрытые div-ы? jasalguero
Я действительно знаю только API Карт Google, поэтому я не могу сказать о других реализациях карт, например, есть также Openlayers / OpenStreetMap. В этом случае мне повезло, что тактика перерисовки сработала Tina CG Hoehr
Не могу поблагодарить тебя за этот пост. Действительно полезно! Eamorr
@ Eamorr Только что увидел твой комментарий, он улыбнулся мне:) Tina CG Hoehr
Привет, я использовал map.invalidateSize (false); вместо L.Util.requestAnimFrame (... и это тоже, похоже, работает. Просто подумал, что я укажу на это. Хотя отличный ответ! Herr Grumps

Похожие вопросы