web-dev-qa-db-ja.com

データ切り替えタブはリーフレットマップをダウンロードしません

タブを使用して明確なコンテンツを表示していますが、データ切り替えタブにあるため、そのうちの1つがダウンロードを停止しました。リーフレットマップです。コードは次のとおりです。

ナビゲーションバーコード：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

脚本 ：

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
              var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
              map.addLayer(cloudmade).setView(iades, 15);
              var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
              var benef = new L.Marker(benefLocation);
              map.addLayer(benef);
              benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
          });
      </script>

マップをタブに配置する前にマップが表示されていましたが、なぜ今は機能しないのか誰かが知っていますか？ありがとう=）

javascripttwitter-bootstraptabstoggleleaflet
14
Ned

SOへようこそ！

ブラウザウィンドウのサイズを変更した後、 リーフレットマップが突然正しく機能する場合、従来の「マップコンテナサイズが無効ですマップの初期化時」：正しく機能するために、リーフレットはマップを初期化するときにマップコンテナのサイズを読み取ります（L.map("mapContainerId")）。

アプリケーションがそのコンテナを非表示にする場合（通常はCSS _display: none;_、またはフレームワークタブ/モーダル/その他…）、または後でそのサイズを変更した場合、Leafletは新しいサイズを認識しません。したがって、正しくレンダリングされません。通常、表示されていると思われるコンテナの一部についてのみタイルをダウンロードします。マップの初期化時に完全に非表示にされたコンテナの場合、これは左上隅の単一のタイルにすることができます。

この間違いは、マップコンテナを「タブ」または「モーダル」パネルに埋め込むときによく発生します。おそらく、一般的なフレームワーク（Bootstrap、Angular、Ionicなど）を使用します。

リーフレットは、ブラウザウィンドウのサイズ変更イベントをリッスンし、発生するとコンテナサイズを再度読み取ります。これは、マップがウィンドウのサイズ変更で突然機能する理由を説明しています。

少なくともコンテナが最初にレンダリングされたときに、タブパネルが表示されたときに map.invalidateSize() を呼び出す（たとえば、タブボタンのクリックでリスナーを追加する）ことによって、この更新を手動でトリガーすることもできます。その正しい寸法で。

タブボタンクリックリスナーの実装については、そのトピックについてSO）で新しい検索を実行します。一般的なフレームワークのほとんどについて、その問題に利用できるリソースが十分にあるはずです。

35
ghybs

まず、このような場合にリーフレットマップが正しく表示されない理由について、@ ghybsに説明していただきありがとうございます。

@ghybsの回答を試したが失敗した場合は、mapオブジェクトのメソッドを呼び出すのではなく、ブラウザのサイズを変更してみてください。

window.dispatchEvent(new Event('resize'));

その修正は私にとってはうまくいきました、そしてそれはすべての場合にうまくいくはずです。

11
Gangai Johann

@armani：モーダルが動的に（非同期に）入力されると、より複雑になります。カスタムスリープ機能を使用してリーフレットを初期化する直前に、リスナーで修正しました。

$('#map-modal').on('shown.bs.modal', function() {
  while($('#map').length == 0) {
    sleep(1000);
  }
  var map = new L.Map('map');
})
1
Patrick D

modal bootstarpを使用したため、この問題が発生します。とにかく解決しませんでした。 map.invalidateSize()とwindow.dispatchEvent(new Event('resize'));を試しましたが、修正されませんでした。

最終的にそれはこれによって修正されました：

$('#map-modal').on('shown.bs.modal', function(event) {});

'shown.bs.modal'イベントとは、モーダルが完全にロードされ、サイズに混乱がない場合を意味し、コードを記述します。

1
armani