Leaflet: 크기 조정 창까지 모든 타일이 로드되지 않음

창 크기 조정 시 크기 조정이 올바르게 작동합니다. 이 예를 참조하십시오. http://leaflet.cloudmade.com/debug/map/map-mobile.html

지도 컨테이너의 크기를 수동으로 조정하는 경우 map.invalidateSize() 를 호출해야 합니다.

나는 같은 문제를보고있다. 처음에는 일부 타일만 표시되지만 브라우저 창의 크기를 조정하면 모든 타일이 표시됩니다.

chrome27에서 이 버그에 대해 수정되지 않았습니다. 동일한 문제가 있습니다.
URL이 실패했습니다

이것을 확인하십시오: http://leafletjs.com/examples/mobile-example.html

@mourner 지도를 동적으로 변경해야 합니다. 그리고 map._onResize()를 사용하여 수정합니다. 위의 URL은 지도 크기를 변경하기 위한 것이 아니라 전체 화면 예시입니다. @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;
        }
    });

창 크기 조정 시 크기 조정이 올바르게 작동합니다. 이 예를 참조하십시오. http://leaflet.cloudmade.com/debug/map/map-mobile.html

지도 컨테이너의 크기를 수동으로 조정하는 경우 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*/
}