小册子：动态div容器

我正在尝试使用Leaflet创建一个小例子，并在我的web应用程序中使用它，但是我遇到了一些困难。小册子：动态div容器

我已经从他们的网页，其中有一个静态地图股利和覆盖几个对象（，circle和polygon）的quick start guide做出了独立的传单例子。但是在我的应用程序中，地图div容器使用jquery进行动态定位和调整大小，这是一个相当复杂的应用程序，所以我不能在这里发布整个代码。

问题是，经过正确的div处理后，地图在div（无论它在哪里）正确绘制，但是在叠加层中，我只能看到。 circle和polygon不可见。

var map = L.map(this.$el.attr('id')).setView([51.505, -0.09], 13); 
    L.tileLayer('http://{s}.tile.cloudmade.com/<APIKEY>/997/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 18 
    }).addTo(map); 

    var circle = L.circle([51.508, -0.11], 500, { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.5 
    }).addTo(map); 

    var polygon = L.polygon([ 
     [51.509, -0.08], 
     [51.503, -0.06], 
     [51.51, -0.047] 
    ]).addTo(map); 

    var marker = L.marker([51.5, -0.09]).addTo(map); 
    marker.bindPopup("<b>Hello world!</b><br>I am a popup."); 
    circle.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

我相信没有什么错在我创建的地图和对象，我甚至在div的整个调整大小后调用map.invalidateSize()的方式。奇怪的部分是弹出窗口显示在正确的位置，但在它后面没有圆圈。

难道问题在于我调整和定位div容器的方式。是否有任何具体的CSS属性，我应该在div容器中使用？

感谢您的帮助。

来源

2012-08-09 ffleandro

在这个问题上睡觉之后，我想了一个JSFiddle例子来重现这个问题。但是，无论我多么努力地尝试，我都无法在更简单的独立示例中复制问题，所以问题必须在我的应用程序中发生一些冲突。

每个症状都指向CSS问题，但是我的CSS范围很广。所以我的最后一个理论是，它必须是我使用的某个库中的冲突。

原来是正确的。问题是NVD3

CSS样式表中的冲突

来源

2012-08-10 13:10:10 ffleandro

小册子：动态div容器

回答

相关问题