Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Как правильно обработать события наведения и клика на Yandex Map?

Столкнулся с проблемой:
placemark1.events.add('mouseenter', function (e) { e.get('target').options.set('iconImageHref', 'img/location_blue_on.svg'); }) .add('mouseleave', function (e) { e.get('target').options.unset('iconImageHref'); }) .add('click', function (e) { e.get('target').options.set('iconImageHref', 'img/location_blue_on.svg'); });
Из кода видно, что обрабатываю сперва наведение со сменой иконки, потом увод мыши с возвращением иконки. После чего обрабатывается клик, который так же меняет иконку. Затем (логично) при уводе мыши срабатывает событие mouseleave, которое здесь и мешает. Можно ли что-то придумать?
Так же, при нажатии на другой маркер, иконка уже нажатого должна приходить в изначальное положение, и так по кругу со всеми маркерами.


Ответ

По сути вы пытаетесь сделать чекбокс. Для этого вам нужно где-то хранить состояние маркера. Один из вариантов - сделать свое свойство в options (назовем его checked). Если это свойство == true - не убираем iconImageHref при уходе курсора.
placemark1.events.add('mouseenter', function (e) { e.get('target').options.set('iconImageHref', 'img/location_blue_on.svg'); }) .add('mouseleave', function (e) { var checked = e.get('target').options.get('checked'); if (!checked) { e.get('target').options.unset('iconImageHref'); } }) .add('click', function (e) { var checked = e.get('target').options.get('checked'); e.get('target').options.set('checked', !checked); });
Дополнено С учетом новых требований это уже будет радиокнопка. И тут нужно хранить состояние для группы объектов (только нужно будет еще решать вопрос принадлежности группе или вообще хранить состояние глобально). Логика несколько поменяется.
var selectedPlacemark; placemark1.events.add('mouseenter', function (e) { e.get('target').options.set('iconImageHref', 'img/location_blue_on.svg'); }) .add('mouseleave', function (e) { if (e.get('target') !== selectedPlacemark) { // убираем иконку только если это не текущий маркер e.get('target').options.unset('iconImageHref'); } }) .add('click', function (e) { if (e.get('target') !== selectedPlacemark) { if (!!selectedPlacemark) { // убираем иконку только если есть текущий маркер selectedPlacemark.options.unset('iconImageHref'); } // сохраняем в переменной текущий маркер selectedPlacemark = e.get('target'); } });

Комментариев нет:

Отправить комментарий