Клуб API Карт

Смена цвета метки при наведении более чем для одной метки

o.a.boyko
14 июля, 12:37

Здравствуйте. Такая проблема: на карте надо разместить более 200 меток и всем надо задать смену цвета при наведении. Судя по https://tech.yandex.ru/maps/jsbox/2.1/event_rollover , надо прописывать myPlacemark.events. Но что делать, если у меня есть myPlacemark1, myPlacemark2, и т.д.? Пробовала через myPlacemark1.events, myPlacemark2.events, но тогда правило работает только для 2-ой метки (последней в списке). 
Как тогда можно попробовать? Не писать же 200 раз myPlacemark1.events
        .add('mouseenter', function (e) { для каждой функции

5 комментариев
Подписаться на комментарии к посту
Использовать делегирование событий как в DOM. Достаточно одного обработчика на коллекцию myMap.geoObjects
Обновлено 14 июля, 13:10
dimik,
а как это можно добавить сюда? не могу понять

ymaps.ready(init);
var myMap,
myPlacemark1,
myPlacemark2;
function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 10
});

myCollection = new ymaps.GeoObjectCollection({}, {
preset: 'islands#redIcon', //все метки красные
draggable: false// и их можно перемещать
});
myPlacemark1 = new ymaps.Placemark([55.76, 37.64], {
hintContent: 'Москва!',
balloonContent: 'Столица России'
});
myPlacemark2 = new ymaps.Placemark([55.855224, 37.652238], {
hintContent: 'свиблово!',
balloonContent: 'свиблово России'
});

myMap.geoObjects.add(myCollection);
myCollection.add(myPlacemark1).add(myPlacemark2);
myPlacemark.events
.add('mouseenter', function (e) {
// Ссылку на объект, вызвавший событие,
// можно получить из поля 'target'.
e.get('target').options.set('preset', 'islands#greenIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.unset('preset');
});
Обновлено 14 июля, 13:22
Положите метки в коллекцию и слушайте события и меняйте опции на ней.
https://jsfiddle.net/hxcxLppo/1/
Если я вас неправильно понял и вам надо менять цвет только у элемента, на который наведена мышка, то замените collection на e.get('target') в обработчиках:
https://jsfiddle.net/hxcxLppo/2/
flapenguin,
спасибо, проблема решилась! Но немного по-другому код получился в итоге