Leaflet: 直到调整窗口大小才加载所有图块

在 windows resize 上调整大小可以正常工作，请参阅此示例： http :

如果您手动调整地图容器的大小，则需要调用map.invalidateSize() 。

我看到了同样的问题。 最初只显示一些图块，但如果我调整浏览器窗口的大小，则会显示所有图块。

没有修复 chrome27 上的这个错误。我有同样的问题
网址失败

检查这个： http :

@mourner我必须动态更改地图。我使用 map._onResize() 来修复它。上面的 url 是一个全屏示例，不用于更改地图大小。感谢您的 hack @ludinov-stuzo

@mourner我发现了问题。我在动画之后使用 setTimeout() 来执行 invalidateSize() 。

    var is_fullScreen=0;
    $("#close_left").click(function(){
        if(is_fullScreen){
            $("#left_panel").animate({left:0,opacity:1},800);
            $("#right_panel").animate({marginLeft:280},800);
            this.className="icon-left";
            is_fullScreen=0;
            setTimeout(function(){ map.setView([5,40],2);},1000);
        }else{
            $("#left_panel").animate({left:-280,opacity:0},800);
            $("#right_panel").animate({marginLeft:0},800);
            this.className="icon-right";
            setTimeout(function(){map.invalidateSize();            map.setView([5,-20],3);},1000)
            is_fullScreen=1;
        }
    });

在 windows resize 上调整大小可以正常工作，请参阅此示例： http :

如果您手动调整地图容器的大小，则需要调用map.invalidateSize() 。

你让我今天一整天都感觉很好。 我的地图无法正常工作。 包括setView 、 flyTo 、 panTo 、 fitbounds在内的所有功能都不能正常工作。 它有时会起作用，有时不会。 我只是不明白它是什么。 然后我在调整窗口大小时看到它有效，经过数小时无用的研发后到达了这个线程。

非常感谢。

听Map obj 对我的帮助。 添加一个在地图加载或更改大小并在内部执行时触发的函数 - map.invalidateSize().

反应钩子方式：

import { Map as LeafletMap } from "react-leaflet";

export default const MyMap = () => {

   useEffect(()=>{
        mapElement.current.leafletElement.invalidateSize();
    },[mapElement])


  /*render and other function*/
}