我正在创建一个门户网站，在那里我使用传单Map。但当我折叠我的左面板。它显示空白。如何解决它。我也有invalidateSize()函数。但它不工作。请让我知道如何解决它。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#map { height: 100%; }
.box {
}
.left {
width:20%;
background:red;
float:left;
}
.right {
width:80%;
background:green;
float:left;
}
.right-100 {
width:100%;
}
.left-0 {
width:0%;
}
.collapse {
background:blue;
color:white;
width:100px;
}
</style>
</head>
<body>
<div class="collapse" id="collapse">collape it</div>
<div class="box">
<div class="left">
Hello Shubham
</div>
<div class="right ">
<div id="map"></div>
</div>
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
// Listen for the event that fires when the panel is collapsed
document.getElementById("#collapse").addEventListener("click", function () {
alert('sasASas');
// Call the invalidateSize method to trigger a recalculation of the map's size
map.invalidateSize();
});
</script>
<script>
$(document).on('click', '.collapse', function () {
alert('SasASas');
$('.right').addClass('right-100');
$('.left').addClass('left-0')
})
</script>
</body>
</html>
1条答案
按热度按时间ezykj2lf1#
请试试这个，我希望它能起作用，刚刚添加了map.invalidateSize（）;在文档中单击函数。