时间戳

首页 > 解决方案 > 显示带有传单的弹出窗口时临时删除集群

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

问题描述

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

这是我的 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 />
任何人有任何想法来解决这个问题？

标签： javascriptleafletpopup

解决方案

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

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

推荐阅读