Клуб API Карт

Собственная метка.

gid-l
9 ноября 2014, 21:34

Добрый день.

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

Все получилось через макет и стили

var omt34Layout = ymaps.templateLayoutFactory.createClass( '<div class="omt34-placemark-layout"><div><span>{{properties.iconContent}}</span><i></i></div></div>', {} );

Внешний див дает клюв, внутренний нужные отступы для текста и рамку, <i> через стиль несет в конце текста иконку.

 ________

|  _______|

|/

Все работает, но:

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

Опера и Хром растягивают область шейпа клюва на всю общую ширину всей конструкции. В итоге получаем активный шейп справа от клюва по сути над пустым пространством.

По новым хотелкам надо сделать шейп только над областью текста без клюва.

Собственно вопрос - как это реализовать? Нигде не нашел примеров создания такого шейпа. Напомню, что длина текста=ширина маркера динамическая, посему описанием статической геометрии не обойтись.

 

Спасибо.

4 комментария
Всеволод Шмыров
10 ноября 2014, 12:36
Доброе утро! Автоматическое определение шейпа зависит от верстки. Шейп можно задать при помощи опции iconShape. В песочнице есть пример, как именно это сделать https://tech.yandex.ru/maps/jsbox/2.1/placemark_shape
У метки со значком "!" как раз есть хвостик. Шейп задается через экранные координаты от текущего расположения метки.

Это я все видел. Там текст статический. У меня динамический. Посему я не знаю размеры, а именно ширину дива, который в итоге получится. Посему я не могу прописать статический шейп как в тех примерах.

Всеволод Шмыров
10 ноября 2014, 13:05
Тогда в вашем случае будет правильней переопределить метод getShape, в котором будет происходить перерасчет элемента после изменения содержания. Пример создания своего шейпа показан в этом примере http://api.yandex.ru/maps/jsbox/2.1/placemark_hint_layout

Пример видел, каюсь.

Получилось.

Спасибо большое.