Как изменить цвет заливки региона по наведению?

Question

Вывожу на карту регионы. Как по наведению изменять цвет заливки?

const regionsArray = [
    "properties.iso3166 = 'RU-KHM'",
    "properties.iso3166 = 'RU-TOM'",
    "properties.iso3166 = 'RU-YAN'",
    "properties.iso3166 = 'RU-KYA'",
    "properties.iso3166 = 'RU-IRK'",
    "properties.iso3166 = 'RU-SA'",
    "properties.iso3166 = 'RU-KO'",
    "properties.iso3166 = 'RU-NVS'",
    "properties.iso3166 = 'RU-TA'",
    "properties.iso3166 = 'RU-CU'",
    "properties.iso3166 = 'RU-PNZ'",
    "properties.iso3166 = 'RU-ULY'",
    "properties.iso3166 = 'RU-SAM'",
    "properties.iso3166 = 'RU-SAR'",
    "properties.iso3166 = 'RU-VGG'",
    "properties.iso3166 = 'RU-KL'",
    "properties.iso3166 = 'RU-AST'",
    "properties.iso3166 = 'RU-ORE'"
];
ymaps.ready(init);
function init() {
    let projectMap = new ymaps.Map("js-map-regions", {
            center: [65, 100],
            zoom: 3,
            controls: ["fullscreenControl"]
        });

    for (let i = 0, l = regionsArray.length; i < l; i++) {
        ymaps.geoQuery(ymaps.borders.load("RU", {
            lang: "ru",
            quality: 2
        })).search(regionsArray[i]).setOptions({
            fillColor: "rgba(237,127,1, 0.1)",
            strokeColor: "#ED7F01"
        }).addToMap(projectMap);
    }
}

Answer 1

Вам нужны события mouseenter и mouseleave. Примерно так:

myRegion.events.add('mouseenter', function (event) {
      var district = event.get('target').getParent();
      district.options.set({fillOpacity: 1});
});
            
myRegion.events.add('mouseleave', function (event) {
      var district = event.get('target').getParent();
      if (district !== highlightedDistrict) {
      district.options.set({fillOpacity: 0.3});
      }
});

В песочнице Яндекса есть интерактивный пример.

БЛОГ НА HUSL

Как изменить цвет заливки региона по наведению?

Ответы (1 шт):