Question

我正在研究一个大学项目，我对JS编码很新，我遇到了一个问题，我正在使用w3库实现我的应用程序，并且当用户点击按钮时会显示模态窗口，这个模态包含一个Leaflet映射，它没有正确呈现，所以我在Stackoverflow上找到了这个问题的解决方案： Leaflet map not showing properly in bootstrap 3.0 modal所以我尝试了该线程中提出的解决方案并将其放入我的JS代码中：

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

但我面临另一个问题，我无法找到解决方案。我的地图仍然渲染不好，但是当我调整浏览器窗口时，它似乎工作正常（重新渲染整个地图，并正确显示地图），所以我认为这个问题可能与时间有关，因为模态可能需要很长时间才能加载map invalidateSize（）在加载modal之前执行，我尝试使用不同的超时（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>

我的JS加载地图：

<head>
    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" >
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.0.8/dist/esri-leaflet.js"></script>

    <style>
        #basemaps-wrapper {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 900;
            background: white;
            padding: 10px;
        }
        #basemaps {
            margin-bottom: 5px;
        }
    </style>
    </head>

    <script language="javascript" type="text/javascript">

    // initialize the map
    var mymap = L.map('map01_comparator').setView([42.35, -71.08], 13);
    // load a tile layer
    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
        {
            attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
            maxZoom: 17,
            minZoom: 9
        }).addTo(mymap);

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

</script>

Answer 1

W3CSS是一个仅限CSS的框架，因此它没有像bootstrap模式这样的事件。您需要在用于打开模态的函数内使地图的大小无效：

document.getElementById("mybutton").onclick = function () {
    document.getElementById('mymodal').style.display = 'block';
    setTimeout(function() {
        mymap.invalidateSize();
    }, 100);
}

LeafLet地图在模态上无法正确渲染

1 个答案: