具有相同坐标的标记不会折叠

Question

集群是在我的地图上创建的，但当标记具有相同的地址时，单击集群时，不会显示工具提示。我正在使用Gmaps Marker Clusterer。代码示例：`函数initMap(({//地图选项var选项={缩放：7，中心：{纬度：53.3938131，lng:-7.858913}}var map=new google.maps.map(document.getElementById('map'(，选项(；//添加一个标记集群器来管理标记。

//Add marker
var markers = [
//Dublin
{
coords:{lat:53.338741, lng:-6.261563},
iconImage:'assets/img/places/stparkdublin.png',
content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
},
{
//coords:{lat:53.3755012,lng:-6.2735677},
coords:{lat:53.338741, lng:-6.261563},
iconImage:'assets/img/places/botanic garden.png',
content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
}
];
// Loop through markers
var gmarkers = [];
for(var i = 0; i < markers.length; i++){
gmarkers.push(addMarker(markers[i]));
}
//Add MArker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
});
/* if(props.iconImage){
marker.setIcon(props.iconImage);
} */
//Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
}
return marker;
}
var markerCluster = new MarkerClusterer(map, gmarkers, 
{
imagePath:
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
google.maps.event.addDomListener(window, 'load', initMap)
</script>

`标记分类器

Answer 1

在您的示例中，您创建了clusterer，但没有指定集群的最大缩放级别。这意味着具有相同坐标的两个标记将永远不会在信息窗口中显示为单独的标记。因此，您应该在clusterer选项中添加maxZoom参数。

另一方面，为了分离具有相同坐标的两个标记，您应该使用重叠标记Spiderfier。当你点击重叠的标记时，你会看到所有的标记。

我从jsfiddle修改了你的例子，并添加了用于集群的最大缩放19，所以在缩放20或21时，你会看到标记，点击时你会看到分离的标记

看看下面的代码片段

function initMap() {
// map options
var options = {
zoom:7,
center:{lat:53.3938131, lng:-7.858913}
}
var map = new google.maps.Map(document.getElementById('map'), options);
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
ignoreMapClick: true,
keepSpiderfied: true
});
// Add a marker clusterer to manage the markers.
//Add marker
var markers = [
//Dublin
{
coords:{lat:53.338741, lng:-6.261563},
iconImage:'assets/img/places/stparkdublin.png',
content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
},
{
//coords:{lat:53.3755012,lng:-6.2735677},
coords:{lat:53.338741, lng:-6.261563},
iconImage:'assets/img/places/botanic garden.png',
content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
}
];
// Loop through markers
var gmarkers = [];
for(var i = 0; i < markers.length; i++){
gmarkers.push(addMarker(markers[i]));
}
//Add MArker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map
});
//Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
}

oms.trackMarker(marker);

return marker;
}

var markerCluster = new MarkerClusterer(map, gmarkers, 
{
maxZoom: 19,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}

google.maps.event.addDomListener(window, 'load', initMap)

#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>

Answer 2

已解决：

var options = {
minClusterSize: 2,
zoomOnClick: true,
maxZoom: 20 
};
markerCluster = new MarkerClusterer(map, allMarkers, options);
google.maps.event.addListener(markerCluster, 'clusterclick', 
function(cluster) {
var content = '';
content += '<div class="custom-marker-box">';
// Convert the coordinates to an MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var marks_in_cluster = cluster.getMarkers();
console.log(marks_in_cluster);
for (var z = 0; z < marks_in_cluster.length; z++) {
content += marks_in_cluster[z].args["title"]; 
console.log(content);
}
var infowindow = new google.maps.InfoWindow({
content: content
});
content += '</div>';
infowindow.close(); // closes previous open ifowindows
infowindow.setContent(content); 
infowindow.open(map, info);
});