Javascript Mapbox基于完全相同位置的群集没有缩放
如何设置视图,使基于同一位置的群集不会缩放?我必须点击cluster两次才能放大,结果发现地图上同一确切位置有多个数据点。请参见下面的图片 群集代码:Javascript Mapbox基于完全相同位置的群集没有缩放,javascript,google-maps,leaflet,mapbox,Javascript,Google Maps,Leaflet,Mapbox,如何设置视图,使基于同一位置的群集不会缩放?我必须点击cluster两次才能放大,结果发现地图上同一确切位置有多个数据点。请参见下面的图片 群集代码: var markerClusterLayer = new L.MarkerClusterGroup({ maxClusterRadius: 25, disableClustringAtZoom: 18, spiderfyDistanceMultiplier: 3,
var markerClusterLayer = new L.MarkerClusterGroup({
maxClusterRadius: 25,
disableClustringAtZoom: 18,
spiderfyDistanceMultiplier: 3,
zoomToBoundsOnClick: true,
showCoverageOnHover: false,
iconCreateFunction: function (cluster) {
var childCount = cluster.getChildCount();
var c = ' custom-marker-cluster-';
if (childCount < 10) {
c += 'small';
} else if (childCount < 30) {
c += 'medium';
} else {
c += 'large';
}
return new L.DivIcon({
html: '<div><span>' + childCount + '</span></div>',
className: 'marker-cluster' + c,
iconSize: new L.Point(40, 40) });
}
});
var markerClusterLayer=新的L.MarkerClusterGroup({
最大群集半径:25,
disableClustringAtZoom:18,
SpiderFyDistance乘数:3,
ZoomToBoundsOn单击:true,
showCoverageOnHover:错误,
iconCreateFunction:函数(群集){
var childCount=cluster.getChildCount();
var c='自定义标记群集-';
如果(儿童人数<10){
c+=‘小’;
}否则如果(儿童人数<30){
c+=‘中等’;
}否则{
c+=‘大’;
}
返回新的L.DivIcon({
html:''+childCount+'',
类名:'标记簇'+c,
iconSize:新的L点(40,40)};
}
});
这是当前官方版本MarkerCluster插件的一个陷阱
有一个新的代码可以纠正这种违反直觉的行为,但不幸的是,它还没有包含在发布的版本中。使用新代码,如果即使在最大地图缩放时,您仍然会得到相同的簇(这意味着您的标记仍然太近,不一定在完全相同的坐标处),则簇将立即“蜘蛛化”,而不进行缩放
我将尝试找到一种方法来“修补”你的脚本,这样就可以包含这个新代码,而不必等待插件的新版本
编辑 通过在脚本中复制粘贴以下代码,您应该会做得很好:
L.MarkerClusterGroup.include({
_zoomOrSpiderfy:函数(e){
var map=此。_map;
//以下第一个条件是中缺少的零件
//当前插件版本,如果所有
//包含的标记仍以最大缩放比例聚集。
if(e.layer.\U bounds.\U Northwest.等于(e.layer.\U bounds.\U southWest)){
if(this.options.spiderfyOnMaxZoom){
e、 层。蜘蛛侠();
}
}else if(map.getMaxZoom()==map.getZoom()){
if(this.options.spiderfyOnMaxZoom){
e、 层。蜘蛛侠();
}
}else if(this.options.zoomToBoundsOn单击){
e、 layer.zoomToBounds();
}
//为键盘用户再次聚焦地图。
if(e.originalEvent&&e.originalEvent.keyCode==13){
map._container.focus();
}
}
});
如果这不能解决您的问题,或者这不是您想要的,请告诉我。在实例化MCG之前,您必须先放置它。演示: