LeafLet Karte nicht korrekt auf modal

im arbeiten an einem Universitätsprojekt, und ich bin ziemlich neu zu JS-Programmierung und ich konfrontiert ein Problem, ich bin meine Anwendung mit W3-Bibliotheken implementieren, und es gibt modales Fenster, das angezeigt wird, wenn Benutzer klicken auf der Schaltfläche, und diese modal enthält eine Broschüre Karte, die richtig war nicht Rendering, so fand ich eine Lösung dieses Problems auf Stackoverflow: Leaflet map not showing properly in bootstrap 3.0 modal so tryied i die vorgeschlagene Lösung in diesem Thread und setze dies in meinem JS-Code:LeafLet Karte nicht korrekt auf modal

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

aber ich hatte ein anderes Problem, für das ich keine Lösung finden konnte. Meine Karte rendert immer noch schlecht, aber wenn ich das Browserfenster verkleinere, scheint es gut zu funktionieren (rendert ganze Karte und zeigt eine Karte richtig an), also dachte ich, dass dieses Problem zeitbezogen sein könnte, da Modal zu lange dauern könnte map invalidateSize() wird ausgeführt, bevor modal geladen wird, und ich habe versucht, verschiedene Timeouts (4, 40, 400, 4000) zu verwenden, aber dies löst nichts, also bin ich hier verloren, irgendwelche Ideen würden geschätzt werden, Jungs hier ist mein modaler Körper:

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

Und meine JS, die Karte lädt:

<head> 
    <!-- Load Leaflet from CDN--> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" > 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <!-- Load Esri Leaflet from CDN --> 
    <script src="https://unpkg.com/[email protected]/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>

Quelle

2017-06-24 Nikita Khudyakov

W3CSS ist ein CSS nur Rahmen, so dass es nicht über Ereignisse wie b ootstrap modal. Sie müssen die Karte der Größe innerhalb der Funktion ungültig zu machen Sie den modalen zu öffnen verwenden:

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

Quelle

2017-06-24 16:59:22 iH8

Dank, Mann, habe ich es jetzt, war das Geheimnis, wie Sie gesagt hat, invalidateSize(), zur richtigen Zeit . Also für diejenigen unter Ihnen, die das gleiche Problem haben, sollten Sie Invalidatesize() direkt nach dem Laden von Modal aufrufen, können Sie es richtig tun, die Schaltfläche, die modal zeigt, oder, wenn Sie nicht möchten, haben php/js in Ihrer Sicht es tun In einem separaten Skript erkennt diese separate Skriptdatei mymap.invalidatesize() ohne zusätzliche Informationen. –

LeafLet Karte nicht korrekt auf modal

Antwort

Verwandte Themen