Leaflet: لم يتم تحميل جميع المربعات حتى نافذة تغيير الحجم

تغيير الحجم على windows يعمل تغيير الحجم بشكل صحيح ، راجع هذا المثال: http://leaflet.cloudmade.com/debug/map/map-mobile.html

إذا قمت بتغيير حجم حاوية الخريطة يدويًا ، فستحتاج إلى الاتصال بـ map.invalidateSize() .

أرى نفس المشكلة. يتم عرض بعض المربعات فقط في البداية ، ولكن إذا قمت بتغيير حجم نافذة المتصفح ، فسيتم عرض جميع المربعات.

لم يتم إصلاح هذا الخطأ على chrome27 لدي نفس المشكلة
فشل عنوان url

حدد هذا: http://leafletjs.com/examples/mobile-example.html

mourner لا بد لي من تغيير الخريطة ديناميكيًا. وأستخدم الخريطة ._onResize () لإصلاحها ، عنوان url أعلاه هو مثال ملء الشاشة ، وليس لتغيير حجم الخريطة. شكرًا لك على hack @ ludinov-stuzo

mourner لقد عثرت على المشكلة ، استخدم setTimeout () لتنفيذ عملية validateSize () بعد الحركة.

    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 يعمل تغيير الحجم بشكل صحيح ، راجع هذا المثال: 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*/
}