本文介绍了Markercluster spiderfy-“地图最大缩放"级别显示标记图标组，而不是带计数的群集视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
执行代码时，我们可以看到计数为3的集群视图.单击集群后，它会放大到最大缩放级别并显示计数为3的集群视图.在此最大缩放级别中，我想显示标记图标组，而不是带有计数3的群集视图.单击标记图标组后，它应开始爬行.
When executing the code, we can see the cluster view with count 3. After clicking on the cluster, It zooms into the max zoom level and displays the cluster view with count 3. In this max zoom level, I wanted to display the marker icon groups instead of the cluster view with count 3. After click on the marker icon groups, It should spiderfy.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
</head>
<body>
<h1>Leaflet Cluster Example</h1>
<p>Here's an interactive map indicating where airports and train stations are located around the world. The data comes from <a href="http://openflights.org/data.html" target="_blank">OpenFlights.org</a>.
<div id="map" style="width: 800px; height: 500px; border: 1px solid #AAA;"></div>
<script type="text/javascript">
var markers = [{
"name": "Goroka",
"city": "Goroka, Papua New Guinea",
"iata_faa": "GKA",
"icao": "AYGA",
"lat": 38.98856,
"lng": -77.32219,
"alt": 5282,
"tz": "Pacific/Port_Moresby"
}, {
"name": "Madang",
"city": "Madang, Papua New Guinea",
"iata_faa": "MAG",
"icao": "AYMD",
"lat": 38.98856,
"lng": -77.32219,
"alt": 20,
"tz": "Pacific/Port_Moresby"
}, {
"name": "Mount Hagen",
"city": "Mount Hagen, Papua New Guinea",
"iata_faa": "HGU",
"icao": "AYMH",
"lat": 38.98852,
"lng": -77.32183,
"alt": 5388,
"tz": "Pacific/Port_Moresby"
}];
var map = L.map('map', {
center: [10.0, 5.0],
minZoom: 2,
maxZoom: 18,
zoom: 2
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
iconSize: [29, 24],
iconAnchor: [9, 21],
popupAnchor: [0, -14]
});
var markerClusters = L.markerClusterGroup();
for (var i = 0; i < markers.length; ++i) {
var popup = markers[i].name +
'<br/>' + markers[i].city +
'<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
'<br/><b>ICAO:</b> ' + markers[i].icao +
'<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
'<br/><b>Timezone:</b> ' + markers[i].tz;
var m = L.marker([markers[i].lat, markers[i].lng], {
draggable: true,
icon: myIcon
})
.bindPopup(popup);
markerClusters.addLayer(m);
}
markerClusters.on("clusterclick", function(c) {
var cluster = c.layer,
bottomCluster = cluster;
while (bottomCluster._childClusters.length === 1) {
bottomCluster = bottomCluster._childClusters[0];
}
if (bottomCluster._zoom === markerClusters._maxZoom &&
bottomCluster._childCount === cluster._childCount) {
c.layer.zoomToBounds();
}
});
map.addLayer(markerClusters);
</script>
</body>推荐答案
有iconCreateFunction您可以使用它并添加您的图像，它实际上用您自己的HTML替换了您提供的html，我刚刚添加了一种方法可以添加它，在html中可以添加anytihng. 此处是它的文档.
There is iconCreateFunction you can use it and add your image, it actually replaces the html you provided with its own, I have just added a way how you can add it, in html you can add anytihng. Here is a documentation of it.
var markerClusters = L.markerClusterGroup({iconCreateFunction: function(cluster) {
return L.divIcon({ html: '<div class="markerImage">' + cluster.getChildCount() + '</div>' });
}});
演示:
.markerImage{
background-image:url("https://image.shutterstock.com/image-vector/map-pin-flat-design-style-450w-627403736.jpg");
background-size: cover;
border: 0;
background-color: transparent;
width: 100px;
height: 100px;
}
.leaflet-marker-icon{
background:transparent !important;
border:0px !important;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
</head>
<body>
<h1>Leaflet Cluster Example</h1>
<p>Here's an interactive map indicating where airports and train stations are located around the world. The data comes from <a href="http://openflights.org/data.html" target="_blank">OpenFlights.org</a>.
<div id="map" style="width: 800px; height: 500px; border: 1px solid #AAA;"></div>
<script type="text/javascript">
var markers = [{
"name": "Goroka",
"city": "Goroka, Papua New Guinea",
"iata_faa": "GKA",
"icao": "AYGA",
"lat": 38.98856,
"lng": -77.32219,
"alt": 5282,
"tz": "Pacific/Port_Moresby"
}, {
"name": "Madang",
"city": "Madang, Papua New Guinea",
"iata_faa": "MAG",
"icao": "AYMD",
"lat": 38.98856,
"lng": -77.32219,
"alt": 20,
"tz": "Pacific/Port_Moresby"
}, {
"name": "Mount Hagen",
"city": "Mount Hagen, Papua New Guinea",
"iata_faa": "HGU",
"icao": "AYMH",
"lat": 38.98852,
"lng": -77.32183,
"alt": 5388,
"tz": "Pacific/Port_Moresby"
}];
var map = L.map('map', {
center: [10.0, 5.0],
minZoom: 2,
maxZoom: 18,
zoom: 2
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
iconSize: [29, 24],
iconAnchor: [9, 21],
popupAnchor: [0, -14]
});
var markerClusters = L.markerClusterGroup({iconCreateFunction: function(cluster) {
return L.divIcon({ html: '<div class="markerImage">' + cluster.getChildCount() + '</div>' });
}});
for (var i = 0; i < markers.length; ++i) {
var popup = markers[i].name +
'<br/>' + markers[i].city +
'<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
'<br/><b>ICAO:</b> ' + markers[i].icao +
'<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
'<br/><b>Timezone:</b> ' + markers[i].tz;
var m = L.marker([markers[i].lat, markers[i].lng], {
draggable: true,
icon: myIcon
})
.bindPopup(popup);
markerClusters.addLayer(m);
}
markerClusters.on("clusterclick", function(c) {
var cluster = c.layer,
bottomCluster = cluster;
while (bottomCluster._childClusters.length === 1) {
bottomCluster = bottomCluster._childClusters[0];
}
if (bottomCluster._zoom === markerClusters._maxZoom &&
bottomCluster._childCount === cluster._childCount) {
c.layer.zoomToBounds();
}
});
map.addLayer(markerClusters);
</script>
</body>这篇关于Markercluster spiderfy-“地图最大缩放"级别显示标记图标组，而不是带计数的群集视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！