传单标记群集：放大后在子标记上打开弹出窗口答案

【问题标题】：leafelt markercluster: open popup on childmarker after zoom in传单标记群集：放大后在子标记上打开弹出窗口
【发布时间】：2018-01-30 14:43:36
【问题描述】：

我有一张传单地图并使用Leaflet.markercluster。标记的数据来自 json 格式的外部服务。

加载地图后，所有可见标记的弹出窗口都按我的意愿打开。但是当我缩小地图时，标记将聚集在一起并且弹出窗口消失。此时一切正常，但是当我放大时，我想再次打开每个子标记的弹出窗口而不单击标记本身。

目前代码如下：

vehicleClusterMarkers = L.markerClusterGroup({
    maxClusterRadius: 45,
    spiderfyOnMaxZoom: false
});
vehicleClusterMarkers.addLayer(TTJsonLayer);

//vehicleClusterMarkers.addTo(map);
map.addLayer(vehicleClusterMarkers);

vehicleClusterMarkers.eachLayer(function(layer) {
    layer.openPopup();
});

我已经做了一些研究，但目前我不知道如何解决这个问题。

如果有人有一些提示，那就太好了。谢谢！

【问题讨论】：

标签： javascript popup leaflet markerclusterer leaflet.markercluster

【解决方案1】：

您有几种可能的解决方案来自动打开非集群标记的弹出窗口。您必须使用事件侦听器，您可以收听"zoomend"，或者可能更好的是，"layeradd" 事件（因为 Leaflet.markercluster 也会从视图中删除标记，因此在不更改缩放级别的情况下进行平移会使一些新标记出现)。

Leaflet.markercluster 插件会在集群时自动从地图中删除您的标记，并在取消集群时将它们添加回来。

在"layeradd" 上，检查添加的层是否是单独的标记（即类L.Marker 的实例），而不是集群。如果是单个 Marker，则打开它的弹窗：

var map = L.map("map", {
  closePopupOnClick: false,
  maxZoom: 18
}).setView([48.85, 2.35], 11);

map.on('layeradd', function(event) {
  var layer = event.layer;

  if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
    layer.openPopup();
  }
});

var mcg = L.markerClusterGroup();

for (var i = 0; i < 10; i += 1) {
  L.marker(getRandomLatLng()).addTo(mcg).bindPopup('Marker ' + i, {
    autoClose: false,
    autoPan: false
  });
}

mcg.addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="map" style="height: 200px"></div>

【讨论】：

非常感谢，白天我研究了传单文档，并认为事件监听器可以解决我的问题，这是正确的。
还有一个问题：如何以及是否可以仅在集群标记层上打开弹出窗口？目前我还有其他层也使用L.marker，并且在layeradd 被触发后，非集群层的最后一个标记的弹出窗口是打开的。
还有另一个问题：map.on('layeradd') 工作正常，但是，我在地图上还有另一个L.marker，每次添加图层时，也会出现错误标记上的弹出窗口。我尝试了不同的方法来排除 L.marker，例如使用.hasLayer()、L.featureGroup 或L.stamp 来获取 id，目前我对丢失的成功有点失望。有人给我建议吗？
请为您的新问题打开一个新问题，并提供相关详细信息和代码。

【解决方案2】：

这是我在研究解决此问题的文档后的解决方案。它也有效，但总是打开所有弹出窗口，即使它们已经打开，我不知道这是否会对地图的性能产生负面影响。

map.on('zoomend', function() {
    vehicleClusterMarkers.eachLayer(function(layer) {
        layer.openPopup();
    });
});

【讨论】：