将弹出窗口移出屏幕会意外关闭弹出窗口(带有leaflet.markercluster的传单) [英] Moving popup off screen closes popup unexpectedly (leaflet with leaflet.markercluster)
问题描述
我不明白为什么,但是每次我打开一个弹出窗口并且该弹出窗口大于屏幕,或者将其锚点移出屏幕时,弹出窗口都会关闭.我现在对其进行了测试,并且仅在播放 leaflet.markercluster
时发生.运行此代码片段以了解我的意思
I don't understand why, but every time I open a popup and the popup is bigger than the screen or I move its anchor off screen, the popup closes. I tested it now and that just happens when leaflet.markercluster
is in play. Run this snippet to see what I mean
弹出窗口会关闭
var map = L.map('map').setView([38, -8], 7)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var markers = L.markerClusterGroup()
for (let i=0; i<100; i++) {
let veryLongHtml = "popup " + i + "<br>"
for (let j=0; j<1000; j++) {
veryLongHtml+='a '
}
const popup = L.popup({
closeOnClick: false,
autoClose: false
}).setContent(veryLongHtml);
const marker = L.marker([
getRandom(37, 39),
getRandom(-9.5, -6.5)
]).bindPopup(popup);
markers.addLayer(marker)
}
map.addLayer(markers);
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
#map {height: 200px}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.Default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
<div id="map"></div>
在这里工作正常,请检查:
Here it works OK, check:
var map = L.map('map').setView([38, -8], 7)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
for (let i=0; i<10; i++) {
let veryLongHtml = "popup " + i + "<br>"
for (let j=0; j<1000; j++) {
veryLongHtml+='a '
}
const popup = L.popup({
closeOnClick: false,
autoClose: false
}).setContent(veryLongHtml);
const marker = L.marker([
getRandom(37, 39),
getRandom(-9.5, -6.5)
]).addTo(map).bindPopup(popup);
}
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
#map {height: 200px}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<div id="map"></div>
推荐答案
I suspect this is due to the removeOutsideVisibleBounds
option (enabled by default) which removes all Markers and Clusters which are far from the viewport to improve performance.
您可以尝试禁用此选项:
You can simply give a try disabling this option:
var markers = L.markerClusterGroup({
removeOutsideVisibleBounds: false
})
也许通过阻止删除仍处于打开状态(且已启用该选项)的标记来改进Leaflet.markercluster库可能会很有趣,这将在库存储库中进行讨论...
Maybe it could be interesting to improve the Leaflet.markercluster library by preventing removing a Marker which popup is still open (and the option is enabled), to be discussed on the library repository...
这篇关于将弹出窗口移出屏幕会意外关闭弹出窗口(带有leaflet.markercluster的传单)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!