时间戳

首页 > 解决方案 > 将弹出窗口移出屏幕会意外关闭弹出窗口（带有 leaflet.markercluster 的传单）

leaflet - 将弹出窗口移出屏幕会意外关闭弹出窗口（带有 leaflet.markercluster 的传单）

问题描述

我不明白为什么，但是每次我打开一个弹出窗口并且弹出窗口大于屏幕或者我将其锚点移出屏幕时，弹出窗口都会关闭。我现在对其进行了测试，并且leaflet.markercluster在播放时会发生这种情况。运行此代码段以了解我的意思

带有leaflet.markercluster

弹出窗口打开时关闭

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>

没有leaflet.markercluster

在这里它工作正常，检查：

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>

标签： leafletleaflet.markercluster

解决方案

我怀疑这是由于该removeOutsideVisibleBounds选项（默认启用）删除了远离视口的所有标记和集群以提高性能。

您可以简单地尝试禁用此选项：

var markers = L.markerClusterGroup({
  removeOutsideVisibleBounds: false
})

也许通过防止删除仍然打开的弹出窗口（并且启用该选项）的标记来改进 Leaflet.markercluster 库可能会很有趣，将在库存储库中讨论......

推荐阅读