【发布时间】：2019-04-30 10:42:22
【问题描述】：
我使用带有传单库的“Leaflet.markercluster”插件在我的地图中显示集群和蜘蛛。
但是当在标记中应用纬度和经度坐标时，如果坐标在附近/非常接近，那么两个坐标都显示在一个单一的蜘蛛视图中。
实际上，我想将这些坐标显示为单独的标记。
在示例中，您可以在“标记”数组中看到，我使用了具有相同坐标的前两个对象，而第三个对象与前两个不同。但是所有三个标记都显示在单个 spiderfy 中。实际上，我希望前两个作为 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>请问如何解决？
【问题讨论】：
标签： javascript leaflet leaflet.markercluster