Карта листовок не отображается должным образом внутри панели с вкладками

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

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

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

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

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

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

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

Ответы на вопрос(2)

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

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

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

Решение Вопроса

но он работает (по крайней мере, в 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 (... и это тоже, похоже, работает. Просто подумал, что я укажу на это. Хотя отличный ответ! - Герр Грампс

 Herr Grumps31 авг. 2012 г., 12:04
Привет, я использовал map.invalidateSize (false); вместо L.Util.requestAnimFrame (... и это тоже, похоже, работает. Просто подумал, что я укажу на это. Хотя отличный ответ!
 Eamorr24 июл. 2012 г., 22:10
Не могу поблагодарить тебя за этот пост. Действительно полезно!
 Tina CG Hoehr06 авг. 2012 г., 03:38
@ Eamorr Только что увидел твой комментарий, он улыбнулся мне:)
 jasalguero26 мая 2012 г., 11:52
Это отлично сработало! Так что это общая проблема со всеми картами, загруженными в скрытые div-ы?
 Tina CG Hoehr26 мая 2012 г., 16:40
Я действительно знаю только API Карт Google, поэтому я не могу сказать о других реализациях карт, например, есть также Openlayers / OpenStreetMap. В этом случае мне повезло, что тактика перерисовки сработала

Ваш ответ на вопрос