Изменение цвета кластеров и меток при наведении

Open in CodeSandbox

Для объединения близко расположенных меток в группу (кластер) используется кластеризатор.

Кластеризатор реализуется классом Clusterer. В качестве параметров конструктору можно передать опции кластеризатора: стиль отображения значка кластера, размер его ячейки и т. д. Список доступных опций можно посмотреть в соответствующем разделе справочника.

Для добавления геообъектов в кластеризатор используется метод add. В качестве параметра может быть передан как отдельный геообъект, так и массив геообъектов.

В примере показано, как изменить цвет иконки или кластера при наведении. 

<!DOCTYPE html>
<html>
    <head>
        <title>Изменение цвета кластеров и меток при наведении</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="clusterer_icon_hover.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.751574, 37.573856],
                zoom: 9,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        clusterer = new ymaps.Clusterer({
            preset: "islands#invertedVioletClusterIcons",
            clusterHideIconOnBalloonOpen: false,
            geoObjectHideIconOnBalloonOpen: false,
        });

    /**
     * Кластеризатор расширяет коллекцию, что позволяет использовать один обработчик
     * для обработки событий всех геообъектов.
     * Будем менять цвет иконок и кластеров при наведении.
     */
    clusterer.events
        // Можно слушать сразу несколько событий, указывая их имена в массиве.
        .add(["mouseenter", "mouseleave"], function (e) {
            var target = e.get("target"),
                type = e.get("type");
            if (typeof target.getGeoObjects != "undefined") {
                // Событие произошло на кластере.
                if (type == "mouseenter") {
                    target.options.set(
                        "preset",
                        "islands#invertedPinkClusterIcons"
                    );
                } else {
                    target.options.set(
                        "preset",
                        "islands#invertedVioletClusterIcons"
                    );
                }
            } else {
                // Событие произошло на геообъекте.
                if (type == "mouseenter") {
                    target.options.set("preset", "islands#pinkIcon");
                } else {
                    target.options.set("preset", "islands#violetIcon");
                }
            }
        });

    var getPointData = function (index) {
            return {
                balloonContentBody:
                    "балун <strong>метки " + index + "</strong>",
                clusterCaption: "метка <strong>" + index + "</strong>",
            };
        },
        getPointOptions = function () {
            return {
                preset: "islands#violetIcon",
            };
        },
        points = [
            [55.831903, 37.411961],
            [55.763338, 37.565466],
            [55.763338, 37.565466],
            [55.744522, 37.616378],
            [55.780898, 37.642889],
            [55.793559, 37.435983],
            [55.800584, 37.675638],
            [55.716733, 37.589988],
            [55.775724, 37.56084],
            [55.822144, 37.433781],
            [55.87417, 37.669838],
            [55.71677, 37.482338],
            [55.78085, 37.75021],
            [55.810906, 37.654142],
            [55.865386, 37.713329],
            [55.847121, 37.525797],
            [55.778655, 37.710743],
            [55.623415, 37.717934],
            [55.863193, 37.737],
            [55.86677, 37.760113],
            [55.698261, 37.730838],
            [55.6338, 37.564769],
            [55.639996, 37.5394],
            [55.69023, 37.405853],
            [55.77597, 37.5129],
            [55.775777, 37.44218],
            [55.811814, 37.440448],
            [55.751841, 37.404853],
            [55.627303, 37.728976],
            [55.816515, 37.597163],
            [55.664352, 37.689397],
            [55.679195, 37.600961],
            [55.673873, 37.658425],
            [55.681006, 37.605126],
            [55.876327, 37.431744],
            [55.843363, 37.778445],
            [55.875445, 37.549348],
            [55.662903, 37.702087],
            [55.746099, 37.434113],
            [55.83866, 37.712326],
            [55.774838, 37.415725],
            [55.871539, 37.630223],
            [55.657037, 37.571271],
            [55.691046, 37.711026],
            [55.803972, 37.65961],
            [55.616448, 37.452759],
            [55.781329, 37.442781],
            [55.844708, 37.74887],
            [55.723123, 37.406067],
            [55.858585, 37.48498],
        ],
        geoObjects = [];

    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(
            points[i],
            getPointData(i),
            getPointOptions()
        );
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true,
    });
});