Leaflet: nicht alle Kacheln geladen, bis Fenstergröße ändern

Die Größenänderung bei der Größenänderung von Windows funktioniert ordnungsgemäß, siehe dieses Beispiel: http://leaflet.cloudmade.com/debug/map/map-mobile.html

Wenn Sie die Größe des Kartencontainers manuell ändern, müssen Sie map.invalidateSize() aufrufen.

Ich sehe das gleiche Problem. Anfangs werden nur einige Kacheln angezeigt, aber wenn ich die Größe meines Browserfensters ändere, werden alle Kacheln angezeigt.

Dieser Fehler wurde bei chrome27 NICHT behoben. Ich habe das gleiche Problem
Die URL ist fehlgeschlagen

Überprüfen Sie diese: http://leafletjs.com/examples/mobile-example.html

@mourner Ich muss die Karte dynamisch ändern.Und ich benutze die Karte._onResize(), um sie zu reparieren.Die obige URL ist ein Vollbild-Beispiel, nicht zum Ändern der Kartengröße.Danke für deinen Hack @ludinov-stuzo

@mourner Ich habe das Problem gefunden. Ich verwende setTimeout (), um die invalidateSize () nach der Animation auszuführen.

    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;
        }
    });

Die Größenänderung bei der Größenänderung von Windows funktioniert ordnungsgemäß, siehe dieses Beispiel: http://leaflet.cloudmade.com/debug/map/map-mobile.html

Wenn Sie die Größe des Kartencontainers manuell ändern, müssen Sie map.invalidateSize() aufrufen.

Du hast meinen Tag gerettet. Meine Karte würde einfach nicht richtig funktionieren. Keine der Funktionen einschließlich setView , flyTo , panTo , fitbounds würde richtig funktionieren. Es würde manchmal funktionieren und manchmal nicht. Ich konnte es einfach nicht verstehen,

Vielen Dank.

Hör zu Map obj hat mir geholfen. Fügen Sie eine Funktion hinzu, die ausgelöst wird, wenn die Karte geladen oder die Größe geändert wird, und innerhalb der Ausführung ausgeführt werden - map.invalidateSize().

Der Reaktionshaken Weg:

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

export default const MyMap = () => {

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


  /*render and other function*/
}