私は大学のプロジェクトに取り組んでおり、JSコーディングは初めてで、問題に直面しました.w3ライブラリを使用してアプリケーションを実装しています.ユーザーがボタンをクリックしたときに表示されるモーダルウィンドウがあり、このモーダルにはリーフレットが含まれていますマップが適切にレンダリングされないため、Stackoverflow でこの問題の解決策を見つけました:リーフレット マップがブートストラップ 3.0 モーダルで適切に表示されないため、そのスレッドで提案されたソリューションを試して、これを JS コードに入れました:
$('#comparator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 400);
});
しかし、解決策が見つからない別の問題に直面しました。私のマップはまだうまく表示されませんが、ブラウザ ウィンドウのサイズを変更すると、正常に動作しているように見えます (マップ全体を再表示し、マップを適切に表示します)。モーダルの読み込みに時間がかかりすぎる可能性があるため、この問題は時間に関連している可能性があります。 map 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;">×</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>
W3CSS は CSS のみのフレームワークであるため、ブートストラップ モーダルのようなイベントはありません。モーダルを開くために使用している関数内でマップのサイズを無効にする必要があります。
document.getElementById("mybutton").onclick = function () {
document.getElementById('mymodal').style.display = 'block';
setTimeout(function() {
mymap.invalidateSize();
}, 100);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加