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

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

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


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

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

Есть ли возможность повлиять на стиль контента внутри маркера, навешивая на маркер класс css, при срабатывании на нем событий мыши?
  • Вопрос задан
  • 6503 просмотра
Решения вопроса 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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы