Клуб API Карт

Кластеризация меток и стили коллекций

Пост в архиве.

Есть 2 группы меток, значки у них разного цвета. Есть еще кластеризация меток.

<script type="text/javascript">
    ymaps.ready(init);
    function init() {
        // Создание экземпляра карты.
        var myMap = new ymaps.Map('map', {
            center: [50.00, 70.00],
            zoom: 3
        });
        var clusterer = new ymaps.Clusterer({
            clusterDisableClickZoom: false,
            preset: 'twirl#greenClusterIcons'
        });
        // Перебираем все группы.
        groups.forEach(function (group) {
            // Коллекция для геообъектов группы.
            var collection = new ymaps.GeoObjectCollection(null, {
                preset: group.style
            });
            // Добавляем коллекцию на карту.
            //myMap.geoObjects.add(collection);
            // Перебираем элементы группы.
            group.items.forEach(function (item) {
                // Создаем метку.
                var placemark = new ymaps.Placemark(item.center, {
                    balloonContent: Item.nick
                });
                // Добавляем метку в коллекцию.
                collection.add(placemark);
                // Добавим полученные геообъекты в кластеризатор.
                clusterer.add(placemark);
                // А сам кластеризатор добавим на карту.
                myMap.geoObjects.add(clusterer);
            });
        });
        myMap.controls
        // Кнопка изменения масштаба.
        .add('zoomControl', {
            left: 5,
            top: 5
        })
        // Список типов карты
        .add('typeSelector')
    }
</script>

 

// Группы объектов
var groups = [
    {
        name: "boys",
        style: "twirl#blueIcon",
        items: [
            {
                center: [50.45987, 30.516174],
                nick: "name 1",
                age: "24",
                city: "Moscow"
                },
            {
                center: [50.445049, 30.528598],
                nick: "name 2",
                age: "24",
                city: "Moscow"
                },
            {
                center: [50.449156, 30.511809],
                nick: "name 3",
                age: "24",
                city: "Moscow"
                }
            ]
    },
    {
        name: "girls",
        style: "twirl#redIcon",
        items: [
            {
                center: [60.45987, 30.516174],
                nick: "name 1",
                age: "24",
                city: "Moscow"
                },
            {
                center: [60.445049, 30.528598],
                nick: "name 2",
                age: "24",
                city: "Moscow"
                },
            {
                center: [60.449156, 30.511809],
                nick: "name 3",
                age: "24",
                city: "Moscow"
                }
            ]
    }
];

 

 Почему то метки все синего цвета. Что я делаю не так?

2 комментария

Вы выставляете стили для группы объектов. А объекты эти стили наследуют, пока находятся в группе. При добавлении объектов в кластеризатор, вы отрываете их от старого родителя и прикрепляете к новому - к кластеризатору, и стили пропадают.

Задавайте стили напрямую каждому объекту.

var placemark = new ymaps.Placemark(item.center, { balloonContent: Item.nick}, {preset: group.style});

Видимо то что Вы сами закомментировали добавление групп на карту.

Вместо этого добавляете кластеризатор

       // Добавляем коллекцию на карту.
        //myMap.geoObjects.add(collection);