Question

我正在使用带有Jquery / Javascript和Leaflet贴图的bootstrap。我有pBody div，里面有map map。我也有一个侧边栏div。上面的拨动开关折叠侧边栏div，并应将pBody div的宽度从span9增加到span11。崩溃工作得很好，这在CSS中，但问题是地图没有重新绘制到div的新大小。我尝试过以下代码：

$("#toggle").click(function (event) {
    event.preventDefault();

    $('#pBody').toggleClass('span9');
    $('#pBody').toggleClass('span11');

     //L.Util.requestAnimFrame(map.invalidateSize, map, !1, panelBody._container); 
     //I have tried this above line but still does not work. 

     $("#map").width("100%");
     map.invalidateSize(false); //this is leaflet function which should redraw the map. 
});

地图div中生成的额外空间用灰色填充。每次放大/缩小地图时，有时会将地图完全绘制成整个大小，或者有时会包含灰色空间。

Answer 1

您的map变量是否可能超出范围且无法从点击功能中访问？

我设置了一个jsfiddle，其中包含一个我无法看到行为的最小示例，但是当您注释掉

时

map.invalidateSize(false);

行你可以看到灰色空间。

尺寸更改后刷新/重新加载div标签容器

1 个答案: