Mapbox没有缩放基于完全相同位置的群集

时间:2015-10-28 16:20:46

标签: javascript google-maps leaflet mapbox

如何设置视图,以便基于相同位置的群集没有缩放?我必须单击群集两次才能放大,才能找到地图上相同位置的多个数据点。见下图。

enter image description here

enter image description here

群集代码:

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) });
            }
        }); 

1 个答案:

答案 0 :(得分:2)

这是MarkerCluster插件当前官方版本的一个陷阱。

有一个新代码可以纠正这种反直觉的行为,但遗憾的是它尚未包含在已发布的版本中。使用新代码,群集“蜘蛛侠”立即不进行缩放,即使在最大地图缩放时,您仍然会获得相同的群集(这意味着您的标记仍然太近,不一定在完全相同的坐标处)。

我将尝试找到一种“修补”脚本的方法,以便可以包含这些新代码而无需等待插件的新版本。

修改

通过在脚本中复制粘贴以下代码,您应该做得很好:

L.MarkerClusterGroup.include({
    _zoomOrSpiderfy: function (e) {
        var map = this._map;
        // The following first condition is the part that is missing in the
        // current plugin release, and which triggers a spiderfy if all
        // contained markers are still clustered at maximum zoom.
        if (e.layer._bounds._northEast.equals(e.layer._bounds._southWest)) {
            if (this.options.spiderfyOnMaxZoom) {
                e.layer.spiderfy();
            }
        } else if (map.getMaxZoom() === map.getZoom()) {
            if (this.options.spiderfyOnMaxZoom) {
                e.layer.spiderfy();
            }
        } else if (this.options.zoomToBoundsOnClick) {
            e.layer.zoomToBounds();
        }

        // Focus the map again for keyboard users.
        if (e.originalEvent && e.originalEvent.keyCode === 13) {
            map._container.focus();
        }
    }
});

如果这不能解决您的问题,或者这不是您想要的问题,请告诉我。