Как стилизовать метки как на самих яндекс картах?

Question

https://skr.sh/s9bKk7E6K9h Как бы сделать так же? Чтобы расширенная инфа сразу была видна. Пробовал через iconCaption, но тогда текст обрезается и только в одну строчку. Да и жирным нельзя сделать.

Answer 1

Следует использовать кастомный макет для меток. Хороший пример для понимания основ есть в песочнице Яндекс: https://yandex.ru/dev/maps/jsbox/2.1/placemark_shape

Потребуется макет метки:

var circleLayout = ymaps.templateLayoutFactory.createClass(`<div style="width: 200px" class="placemark_layout_container"><div class="circle_layout">
    ООО "Яблоки на снегу"<br>
    рейтинг: 5 звёзд ☼ </div></div>`);

Сама метка, с активной зоной:

var circlePlacemark = new ymaps.Placemark({...}, {
    iconLayout: circleLayout,
    iconShape: {type: 'Circle', coordinates: [0, 0], radius: 14}})};

А также css-стилями потребуется оформить внешний вид этих меток. Базовой формы метки, текста и иконки. В данном примере

.placemark_layout_container {...}
.circle_layout {...}
.circle_layout:after {...}

Немного грязный код, но отображающий результат можно глянуть тут: https://jsfiddle.net/230emkr6/

БЛОГ НА HUSL

Как стилизовать метки как на самих яндекс картах?

Ответы (1 шт):