Как повлиять на стили контента внутри кастомного маркера яндекс карт?

Question

[Makito]

Требуется разместить цифирки (1,2,3...) в кастомных маркерах на карте. Вроде не проблема — берем свойство iconContent и запихиваем туда цифру, но нужно еще прикрутить стили для шрифта внутри маркера. Хорошо — изменяем чтили через css (что думаю не есть хорошо, так как думаю есть какой то способ навесить на кастомный маркер свой класс css).

Выглядит как надо, но — при наведении курсора мыши маркер должен менять свой вид: изменяется цвет фона а соответственно должен меняться и цвет шрифта. Навешиваю посредством api события mouseenter и mouseleave на маркер, подменяя картинку маркера, при этом через стили изменяю цвет цифр внутри маркера.


Далее проблема в следующем:

Маркеры привязаны к списку ссылок с адресами, который выводится рядом с картой, при наведении на ссылку должен среагировать соответствующий маркер на карте. Вызываю программно события на маркере, и тут возникает проблема — маркер изменяет иконку, но стили для текста внутри метки не применяются, так как они прописаны в css.

Есть ли возможность повлиять на стиль контента внутри маркера, навешивая на маркер класс css, при срабатывании на нем событий мыши?

Comments

[Makito]

Проблема состоит в том что я не нашел, как обратиться к самому маркеру как к dom-элементу из функции навешивающей события mouseenter / mouseleave, чтобы установить для него стили через js.

Answer 1

[Makito]

В общем нарыл таки ответ. Раз идет такая кастомизация то лучше использовать фабрику создания макетов из шаблонов templateLayoutFactory.
Через этот конструктор устанавливаем шаблон вывода контента для метки

var commonContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content">$[properties.iconContent]</div>');

а для ситуации с наведением мыши немного модифицируем шаблон, добавив класс к hover обертке

var hoverContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content hover">$[properties.iconContent]</div>');

затем эти шаблоны применяем к стилевому оформлению наших кастомных маркеров, через свойство iconContentLayout

Получаем нужный результат — можем стилизовать контент внутри маркера как угодно, и при программном вызове событий стили на маркерах отрабатываются корректно.