Javascript 传单贴图无法在模式上正确渲染_Javascript_Leaflet

Javascript 传单贴图无法在模式上正确渲染

javascript leaflet

Javascript 传单贴图无法在模式上正确渲染,javascript,leaflet,Javascript,Leaflet,我正在从事一个大学项目，我对JS编码非常陌生，我面临一个问题，我正在使用w3库实现我的应用程序，当用户单击按钮时，会显示一个模式窗口，该模式包含一个传单贴图，无法正确渲染，因此我在Stackoverflow上找到了这个问题的解决方案：因此，我在该线程中尝试了建议的解决方案，并将其放入我的JS代码中： $('#comparator_modal').on('show.w3.modal', function(){ setTimeout(function() { mymap.i

我正在从事一个大学项目，我对JS编码非常陌生，我面临一个问题，我正在使用w3库实现我的应用程序，当用户单击按钮时，会显示一个模式窗口，该模式包含一个传单贴图，无法正确渲染，因此我在Stackoverflow上找到了这个问题的解决方案：因此，我在该线程中尝试了建议的解决方案，并将其放入我的JS代码中：

$('#comparator_modal').on('show.w3.modal', function(){
    setTimeout(function() {
        mymap.invalidateSize();
    }, 400);
});

但我面临着另一个我找不到解决办法的问题。我的贴图仍然渲染不好，但当我调整浏览器窗口大小时，它似乎工作正常（重新渲染整个贴图，并正确显示贴图），因此我认为这个问题可能与时间有关，因为加载模式可能需要太长时间，并且在加载模式之前执行map invalidateSize（），我尝试使用不同的超时（4、40、400、4000），但这并不能解决任何问题，所以我在这里有点迷茫，任何想法都会被感激的，伙计们这是我的模态体：

<div id="comparator_modal" class="  w3-modal">
                <div  class="w3-modal-content  w3-animate-left w3-card-4">
                    <header class="w3-container w3-blue">
                        <span onclick="document.getElementById('comparator_modal').style.display='none'"
                              class="w3-btn w3-red w3-round w3-display-topright" style="font-size:16px; text-shadow:2px 1px 0 #444;">&times;</span>
                        <h3 class="w3-center" style="text-shadow:2px 1px 0 #444;">Comparator</h3>
                    </header>
                    <body>
                        <div id="comparator_modal_body">
                            <div class=w3-row">
                                <div id="map01_comparator"></div>
                                <!--<div id=map01_comparator class="w3-half w3-text-black">Map#1</div>
                                <div id=map02_comparator class="w3-half w3-text-black">Map#2</div>-->
                                <div class="w3-row">
                                    <div class="w3-half w3-center w3-text-black">
                                        <div id="time_stamp1">Time_stamp</div>
                                    </div>
                                    <div class="w3-half w3-center w3-text-black">
                                        <div id = "time_stamp2">Time_stamp</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </body>
                    <footer class="w3-container w3-light-grey">

                    </footer>
                </div>
            </div>


&时代；
比较器
W3CSS是一个仅限于CSS的框架，因此它没有类似于引导模式的事件。您需要在用于打开模式的函数中使贴图的大小无效：
document.getElementById("mybutton").onclick = function () {
    document.getElementById('mymodal').style.display = 'block';
    setTimeout(function() {
        mymap.invalidateSize();
    }, 100);
}

谢谢，伙计，我现在明白了，秘密是，就像你说的，在正确的时间使（）无效。因此，对于有相同问题的人，应该在加载模式后立即调用invalidatesize（），您可以直接在显示模式的按钮上执行，或者，如果您不想让php/js出现在视图中，则在单独的脚本中执行，此单独的脚本文件将识别mymap.invalidatesize（），而不需要任何其他信息。
document.getElementById("mybutton").onclick = function () {
    document.getElementById('mymodal').style.display = 'block';
    setTimeout(function() {
        mymap.invalidateSize();
    }, 100);
}