Question

我正在尝试使用Leaflet创建一个小例子并在我的网络应用程序中使用它，但是我有一些困难。

我已经从他们页面的quick start guide创建了一个独立的Leaflet示例，其中包含一个静态地图div并覆盖了一些对象（marker，circle和polygon ）。但是在我的应用程序中，map div容器使用jquery动态定位和调整大小，这是一个非常复杂的应用程序，所以我不能在这里发布整个代码。

问题是在正确处理div之后，地图在div中正确绘制（无论它在哪里），但是在叠加层中我只能看到marker。 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容器的位置。我应该在div容器中使用任何特定的CSS属性吗？

感谢您的帮助。

Answer 1

在这个问题上睡觉后，我想到了一个JSFiddle例子来重现这个问题。然而，无论我多么努力，我都无法在一个更简单的独立示例中复制该问题，因此问题必须在我的应用程序中发生冲突。

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

结果证明是正确的。问题是库NVD3

的CSS样式表中存在冲突

Leaflet：动态div容器

1 个答案: