LeafLetマップは適切にモーダルでレンダリングしません

私は大学のプロジェクトに取り組んでいます。私は問題を抱えていました。私はw3ライブラリを使ってアプリケーションを実装しています。ユーザーがクリックすると表示されるモーダルウィンドウがあります。私はこの問題の解決策を見つけたので、Stackoverflow： Leaflet map not showing properly in bootstrap 3.0 modal私はそのスレッドで提案されたソリューションを試して、これを私のJSコードに入れて：LeafLetマップは適切にモーダルでレンダリングしません

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

しかし私は解決策を見つけることができない別の問題に直面した。私のマップはまだひどくレンダリングされますが、ブラウザウィンドウのサイズを変更すると、マップ全体が再描画され、マップが正しく表示されるように見えるので、この問題は時間に関係している可能性があります。マップinvalidateSize（）はモーダルがロードされる前に実行され、異なるタイムアウト（4,40,400,4,000）を使用しようとしましたが、何も解決しないので、ここで失われたビットはここで失われます。私のモーダルボディ：ロード

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

出典

2017-06-24 Nikita Khudyakov

W3CSSはCSSのみフレームワークであり、それは、Bのようなイベントを持っていませんオットストラップモーダル。あなたはモーダルを開くために使用している関数内でマップのサイズを無効化する必要があります：あなたが言ったように

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

出典

2017-06-24 16:59:22 iH8

おかげで、男は、私は今それを得た、秘密は、適切なタイミングで、）（invalidateSize void次にために、でした。あなたが同じ問題を抱えている人にとっては、モーダルをロードした直後にinvalidatesize（）を呼び出す必要があります。モーダルを示すボタンを右クリックするか、php/jsを表示したくない場合はこの個別のスクリプトファイルは、必要な追加情報なしでmymap.invalidatesize（）を認識します。 –

LeafLetマップは適切にモーダルでレンダリングしません

答えて

関連する問題