Где изменить размер значка Leaflet MarkerCluster в CSS?

Я просмотрел файл CSS для плагина Marker Clusters в Leaflet. Я изменил значок на то, что хотел в классе .marker-cluster-small css. Я установил его на background-image: url(....). Я установил значение прозрачности (альфа) для кластеров на 0, чтобы видеть только нужный значок. Как мне увеличить размер моей иконки, чтобы она не обрубалась. вот ссылка для кластера CSS

введите здесь описание ссылки


html css leaflet markerclusterer
person fifamaniac04    schedule 10.12.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Метод создания значка по умолчанию в Leaflet.markercluster возвращает

L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

Он устанавливает размер значка 40 пикселей, который выглядит так, чтобы быть записанным в оболочку <div> кластера маркеров, который имеет приоритет над размером, который вы устанавливаете в CSS.

Быстрое решение может состоять в том, чтобы добавить объявление !important к свойствам высоты и ширины в вашем CSS, чтобы убедиться, что они применяются.

Лучший способ — передать функцию создания значка клиента при создании новой группы кластера маркеров, как указано в их документах: Настройка маркеров кластера

var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    }
});
person JRam    schedule 10.12.2013

arrow_upward
2
arrow_downward

Вы можете попробовать что-то вроде этого, чтобы полностью настроить значки MarkerClusterGroup:

var markers = new L.MarkerClusterGroup({
    spiderfyOnMaxZoom: true,
    removeOutsideVisibleBounds: true,
    animateAddingMarkers: true,
    iconCreateFunction: function(cluster) {
        var clusterSize = "small";
        if (cluster.getChildCount() >= 10) {
            clusterSize = "medium";
        }
        return new L.DivIcon({
            html: '<div><span>' + cluster.getChildCount() + '</span></div>',
            className: 'marker-cluster marker-cluster-' + clusterSize,
            iconSize: new L.Point(40, 40)
        });
    }
});

См. раздел Настройка кластеризованных маркеров.

person fulvio    schedule 06.05.2014