Google maps 具有相同坐标的标记don';t崩溃
簇是在“我的地图”上创建的,但当标记具有相同的地址时,单击簇时,工具提示不会显示。我正在使用Gmaps标记聚类器。代码示例:` 函数initMap(){ //地图选项 变量选项={ 缩放:7, 中心:{lat:53.3938131,lng:-7.858913} } var map=new google.maps.map(document.getElementById('map'),options); //添加标记群集器以管理标记Google maps 具有相同坐标的标记don';t崩溃,google-maps,marker,Google Maps,Marker,簇是在“我的地图”上创建的,但当标记具有相同的地址时,单击簇时,工具提示不会显示。我正在使用Gmaps标记聚类器。代码示例:` 函数initMap(){ //地图选项 变量选项={ 缩放:7, 中心:{lat:53.3938131,lng:-7.858913} } var map=new google.maps.map(document.getElementById('map'),options); //添加标记群集器以管理标记 //Add marker
//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>
//添加标记
变量标记=[
//都柏林
{
协调:{lat:53.338741,lng:-6.261563},
iconImage:'assets/img/places/stparkdublin.png',
内容:'St Stephen's Green'+'
'+'了解更多'+'在您的示例中,您创建了clusterer,但没有指定聚类的最大缩放级别。这意味着具有相同坐标的两个标记永远不会在信息窗口中显示为单独的标记。因此,您应该在clusterer选项中添加maxZoom
参数
另一方面,为了用相同的坐标分隔两个标记,您应该使用。当您单击重叠标记时,您将看到所有标记
我在JSFIDLE中修改了您的示例,并为集群添加了max zoom 19,因此在zoom 20或21中,您将看到标记,单击将看到分离的标记
请看下面的代码片段
函数initMap(){
//地图选项
变量选项={
缩放:7,
中心:{lat:53.3938131,lng:-7.858913}
}
var map=new google.maps.map(document.getElementById('map'),options);
var oms=新的重叠标记器(映射{
markersWontMove:没错,
马克斯旺泰德:是的,
基本格式事件:正确,
ignoreMapClick:true,
Keepsiderfied:真的
});
//添加标记群集器以管理标记。
//添加标记
变量标记=[
//都柏林
{
协调:{lat:53.338741,lng:-6.261563},
iconImage:'assets/img/places/stparkdublin.png',
内容:'St Stephen's Green'+'
'+'了解更多'+'http://ststephensgreenpark.ie/'
},
{
//协调:{lat:53.3755012,lng:-6.2735677},
协调:{lat:53.338741,lng:-6.261563},
iconImage:'assets/img/places/植物学garden.png',
内容:“‘植物园’+”
“+”了解更多信息“+”http://botanicgardens.ie/'
}
];
//循环标记
var gmarkers=[];
对于(var i=0;i
#地图{
身高:100%;
}
html,
身体{
身高:100%;
保证金:0;
填充:0;
}
已解决:
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);
});
var选项={
最小群集大小:2,
zoomOnClick:对,
最大缩放:20
};
markerCluster=新的MarkerClusterer(地图、所有标记、选项);
google.maps.event.addListener(markerCluster,'clusterclick',
功能(群集){
var内容=“”;
内容+='';
//将坐标转换为MVCObject
var info=new google.maps.MVCObject;
信息集('position',cluster.center_);
//获取标记
var marks_in_cluster=cluster.getMarkers();
console.log(在_集群中标记_);
for(var z=0;z
代码示例: