2

我正在尝试使用 Leaflet 创建一个小示例并将其用于我的网络应用程序，但是我遇到了一些困难。

我已经从他们页面的快速入门指南中制作了一个独立的 Leaflet 示例，它有一个静态地图 div 并覆盖了一些对象（marker和circle）polygon。但是在我的应用程序中，地图 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();

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

问题可能出在我调整 div 容器大小和位置的方式上吗？CSS我应该在 div 容器中使用任何特定属性吗？

感谢所有的帮助。

4

1 回答 1

1

在解决了这个问题之后，我想到了一个JSFiddle例子来重现这个问题。但是，无论我多么努力，我都无法在更简单的独立示例中复制该问题，因此问题必须在我的应用程序中存在一些冲突。

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

结果证明是正确的。问题是CSS库NVD3的样式表中的冲突

于 2012-08-10T13:10:10.933 回答