英文:
My leaflet map is showing blank space while collapsing the left panel
问题
以下是您要翻译的部分：
I'm creating a portal, where am using leaflet map. But when I collapsing my left panel. it showing blank space. how to solve it. Also I have invalidateSize() function . but It's not working. Kindly let me know how to solve it.
<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>
英文:
I'm creating a portal, where am using leaflet map. But when I collapsing my left panel. it showing blank space. how to solve it. Also I have invalidateSize() function . but It's not working. Kindly let me know how to solve it.
<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: '&copy; <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
得分: 0
请尝试这个，我希望它会起作用，只需在您的文档中的点击函数中添加map.invalidateSize();。
<script>
$(document).on('click', '.collapse', function () {
alert('SasASas');
$('.right').addClass('right-100');
$('.left').addClass('left-0')
map.invalidateSize();
})
</script>
如果您需要更多帮助，请告诉我。
英文:
Please try this, i hope it will work, just added map.invalidateSize(); in your document on click function.
<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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
</script>
<script>
$(document).on('click', '.collapse', function () {
alert('SasASas');
$('.right').addClass('right-100');
$('.left').addClass('left-0')
map.invalidateSize();
})
</script>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论