單張地圖沒有標籤面板

我試圖用Leaflet.js顯示地圖從Twitter的引導選項卡式面板內，但在一個陌生的方式表現中正確顯示包含面板的地圖頂部有一個灰色圖層。如果我拖動和移動地圖，我會看到其他瓷磚，但不是最初的瓷磚。單張地圖沒有標籤面板

更奇怪的是，如果我調整瀏覽器的大小，突然它會完美運行，直到我再次加載，所以我猜測是CSS的問題，但我找不到問題。

此外，放置在標籤面板外的地圖效果很好。

我在Firefox和Chrome中測試過，兩者都有相同的問題。

我的jsfiddle創建了一個測試，看看它「活」：http://jsfiddle.net/jasalguero/C7Rp8/1/

任何幫助，非常感謝！

2012-05-26 jasalguero

這是從與leaflet.js源代碼搞亂一個完整的黑客，但它的作品（至少在的jsfiddle）http://jsfiddle.net/C7Rp8/4/

的想法是從谷歌地圖，以「調整」或「重新繪製」地圖時它的容器div被調整大小。

我所做的改變是：

添加ID link3的小標籤在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線取from trackResize in leaflet.js

從評論更新：嗨，我用map.invalidateSize（false）;而不是L.Util.requestAnimFrame（...這似乎也工作，只是認爲我指出了這一點，但很好的回答！ - 先生Grumps

2012-05-26 02:05:41

這工作非常大，所以它在隱藏層加載的所有地圖的共同課題 – jasalguero

我真的只知道谷歌地圖API，所以我不能說！？其他的地圖實現，例如也有Openlayers/OpenStreetMap。在這種情況下，我很幸運，重繪的策略工作:) –

對於這篇文章，感謝你不夠。真的有幫助！ – Eamorr

引導3具有自定義名稱空間事件，所以以前的答案會一起工作：

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

2014-06-17 17:05:03 youanden

回答