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

Question

im working on a university project, and im quite new to JS coding and i faced an issue, i am implementing my application using w3 libraries, and there is modal window which is shown when user click on the button, and this modal contains a Leaflet map, which isnt rendering properly, so I found a solution of this problem on Stackoverflow: Leaflet map not showing properly in bootstrap 3.0 modal so i tryied the proposed solution in that thread and put this in my JS code: 我正在大学项目工作，我对JS编码很新，我遇到了一个问题，我正在使用w3库实现我的应用程序，并且有用户点击按钮时显示的模态窗口，此模式包含一个传单map，它没有正确呈现，所以我在Stackoverflow上找到了这个问题的解决方案： Leaflet map在bootstrap 3.0模式中没有正确显示所以我在该线程中尝试了提议的解决方案并将其放在我的JS代码中：

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

but i faced another problem which i cant find a solution to. 但我面临另一个问题，我无法找到解决方案。 My map still renders badly, but when i resize browser window it seems to work fine(re-renders whole map, and shows a map properly), so i thought this problem might be time related, because modal might take too long to load and map invalidateSize() is executed before modal is loaded, and i tried to use different timeouts(4, 40, 400, 4000), but this doesnt resolve anything, so im bit lost here, any ideas would be appreciated,guys here is my modal body: 我的地图仍然渲染不好，但是当我调整浏览器窗口时，它似乎工作正常（重新渲染整个地图，并正确显示地图），所以我认为这个问题可能与时间有关，因为模态可能需要很长时间才能加载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>

And my JS which loads map: 我的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 is a CSS only framework, so it does not have events like bootstrap modal. W3CSS是一个仅CSS的框架，因此它没有像bootstrap模式这样的事件。 You need to invalidate the map's size inside the function you are using to open the modal: 您需要在用于打开模态的函数内使地图的大小无效：

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

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-06-24 16:59:22

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-06-24 16:59:22

解决方案1
3 已采纳 2017-06-24 16:59:22