Клуб API Карт

Найдено на тему «макет метки»:
Как создать HTML-метку с поведением обычной метки (с подсказкой и балуном)?
f-ph
2 апреля 2016, 10:15

Здравствуйте. Мне нужно создать на карте метку (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' выглядит как костыль.

3 комментария
макет метки,html,balloon
Разное отображение макета метки в разных масштабах
Иван
1 октября 2015, 10:20

Добрый день! Подскажите, как мне настроить разное отображение меток в зависимости от масштаба. Метки добавляются через RemoteObjectManager. Затем создаётся свой макет для меток и применяется при добавлении:

var placeLayout = ymaps.templateLayoutFactory.createClass( '<div class="placemark_layout_container">' +

  '<div class="place_layout place_{{properties.iconImageClass}}"></div>' +

  '<div class="title_layout title_layout_place">{{properties.title}}</div>' +

  '</div>' );

remoteObjectManager.objects.events.add('add',function (e) {

  remoteObjectManager.objects.setObjectOptions(e.get('objectId'),{

    iconLayout: placeLayout,

    iconShape: {

      type: 'Rectangle',

      coordinates: [[-9,-30], [9,0]],

    },

  });

});

Пробовал заменять {{properties.title}} на переменную, значение которой менять в зависимости от myMap.getZoom(). Но метки, кажется, кешируются и показывается только изначальный режим отображения.

19 комментариев
макет метки,метка,API 2.1,iconLayout