Здравствуйте. Мне нужно создать на карте метку (ymaps.Placemark), которая задаётся HTML кодом (по ряду причин задать картинкой нельзя). Как следать это так, чтобы при этом работало стандартное поведение метки (курсор при наведении, подсказка и балун)?
Я пытался сделать так:
var customIcon = ymaps.templateLayoutFactory.createClass( '<div class="theme-border theme-background" style="width: 0.6em; height: 0.6em; border-style: solid; border-width: 0.4em; border-radius: 100%; margin: -0.7em;"></div>' ); var placemark = new ymaps.Placemark( [ 43, 56 ], { hintContent: 'Метка', balloonContent: 'Описание' }, { iconLayout: customIcon } ); myMap.geoObjects.add( placemark );
Но так исчезает вся интерактивность метки.
Ещё пытался сделать так:
var customIcon = ymaps.templateLayoutFactory.createClass( '<div class="theme-border theme-background" style="width: 0.6em; height: 0.6em; border-style: solid; border-width: 0.4em; border-radius: 100%; margin: -0.7em;"></div>' ); var placemark = new ymaps.Placemark( [ 43, 56 ], { hintContent: 'Метка', balloonContent: 'Описание' }, { iconLayout: 'default#imageWithContent', iconImageHref: '', iconImageSize: [ 0, 0 ], iconImageOffset: [ 0, 0 ], iconContentLayout: customIcon } ); myMap.geoObjects.add( placemark );
В таком случае поведение сохраняется, но активной областью метки становится квадрат 1х1 пиксель в центре, что не хорошо. А использование 'default#imageWithContent' выглядит как костыль.