LeafLet地图在模态框上无法正确显示。

Question

LeafLet地图在模态框上无法正确显示。

3

我正在参与一项大学项目，对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);
});

但是我遇到了另一个问题，无法找到解决方法。我的地图仍然渲染得很糟糕，但是当我调整浏览器窗口大小时，它似乎可以正常工作（重新渲染整个地图，并正确显示地图），因此我认为这个问题可能与时间有关，因为模态框可能需要太长时间来加载，而地图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>

以下是加载地图的JavaScript代码：

<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>

- Nikita Khudyakov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iH8 · Accepted Answer

W3CSS是一种仅使用CSS的框架，因此它没有像Bootstrap模态框那样的事件。您需要在打开模态框的函数内部使地图的大小无效：

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