显示带有传单的弹出窗口时临时删除集群答案

【问题标题】：temporaly remove cluster when show popup with leaflet显示带有传单的弹出窗口时临时删除集群
【发布时间】：2020-05-19 14:45:23
【问题描述】：

我正在尝试使用外部（地图外）链接打开传单弹出窗口。我的代码运行良好，但是当目标位于集群中时，它不会展开并且不会显示弹出窗口。

这是我的 JS：

var center = {lat:48.835797462431, lon:2.35107421875};
var abp_umap = null;
var markCluster;
var markers = [];
var umusers = {
	"557":{"lat":48.8168,"lon":2.488,"img":"<a href=\"#\" class=\"popmap\" title=\"test01\">test01<\/a>"},
	"2191":{"lat":48.8168,"lon":2.488,"img":"<a href=\"#\" class=\"popmap\" title=\"test02\">test02<\/a>"},
	"979":{"lat":49.8168,"lon":2.488,"img":"<a href=\"#\" class=\"popmap\" title=\"test03\">test03<\/a>"},
	"235":{"lat":52.597,"lon":13.1211,"img":"<a href=\"#\" class=\"popmap\" title=\"test04\">test04<\/a>"},
	"2193":{"lat":45.9238,"lon":6.86933,"img":"<a href=\"#\" class=\"popmap\" title=\"test05\">test05<\/a>"},
	"2192":{"lat":44.6333,"lon":-1.0667,"img":"<a href=\"#\" class=\"popmap\" title=\"test06\">test06<\/a>"},
	"2190":{"lat":43.8347,"lon":4.3614,"img":"<a href=\"#\" class=\"popmap\" title=\"test07\">test07<\/a>"}}
function init_map() {
		abp_umap = L.map("abp_usermap").setView([center.lat, center.lon], 5);
		markCluster = L.markerClusterGroup();
		L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: '&copy; <a href="https://www.openstreetmap.org" title="OpenStreetMap">OpenStreetMap</a> contributors'}).addTo(abp_umap);
		L.control.scale().addTo(abp_umap);
		for (user in umusers) {
			var uIcon = L.icon({ iconUrl:"https://forum.raspfr.org/images/Raspberry_Pi_logo.png", iconSize:[25, 32], iconAnchor: [12.5,16], popupAnchor :[(25/2)-12.5,-16]});
			var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:''});
      markers[user] = marker;
			markCluster.addLayer(marker);
		}
		abp_umap.addLayer(markCluster);
}
$(function() {
	init_map();
	$("#centerme").click(function() { abp_umap.setView([48.835797462431, 2.35107421875]); return false; });
	$("#rzoom").click(function() { abp_umap.setZoom(5); return false; });
	$(".popmap").on("click", function(e) {
	    	e.preventDefault();
	    	mypop = markers[this.id];
	    	abp_umap.setView([umusers[this.id].lat, umusers[this.id].lon]);
	    	abp_umap.setZoom(14);
	    	mypop.openPopup();
	    	return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/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.4.1/MarkerCluster.Default.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
<a href="#" class="popmap" id="557" title="test01">test01</a>, <a href="#" class="popmap" id="2191" title="test02">test02</a>, <a href="#" class="popmap" id="979" title="test03">test03</a>, <a href="#" class="popmap" id="235" title="test04">test04</a>, <a href="#" class="popmap" id="2193" title="test05">test05</a>, <a href="#" class="popmap" id="2192" title="test06">test06</a>, <a href="#" class="popmap" id="2190" title="test07">test07</a>
<br /><div id="abp_usermap" style="height:200px;"></div><br />

任何人有任何想法来解决这个问题？

【问题讨论】：

标签： javascript leaflet popup

【解决方案1】：

markerCluster 对象有自己的点击事件 - clusterclick。如果您希望在单击集群时发生某些事情，则需要侦听这些内容。

见https://github.com/Leaflet/Leaflet.markercluster#events

【讨论】：

您好，我不想单击集群，我希望如果单击集群中的链接（在我的示例中为 test1、test2 或 test3），则扩展集群并且显示相关引脚的弹出窗口。实际上，我正在寻找使集群蜘蛛化的方法，因此显示了引脚。而这无需用户在地图上进行任何操作，仅在点击地图的链接 OUT 时使用 JS

【解决方案2】：

我想我可以使用{disableClusteringAtZoom: 14}（14 是我用来聚焦针的缩放级别），它不是更有效，但它似乎工作。欢迎任何其他想法:)

【讨论】：