Клуб API Карт

как стилизовать балун кластера и балун метки?

ork.nosov2016
11 февраля 2016, 21:00

Создаю общий макет балуна для кластера и метки,но не работает,к кластеру применяется к метке нет

MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="popover-bg">' +
'<a class="close" href="#">&times;</a>' +
'<div class="arrow"></div>' +
'<div class="popover-inner">' +
'$[[options.contentLayout observeSize minWidth=315 maxWidth=auto ]]' +
'</div>' +
'</div>', {

build: function () {
    this.constructor.superclass.build.call(this);

    this._$element = $('.popover', this.getParentElement());

    this.applyElementOffset();

    this._$element.find('.close')
        .on('click', $.proxy(this.onCloseClick, this));
},

clear: function () {
    this._$element.find('.close')
        .off('click');

    this.constructor.superclass.clear.call(this);
},

applyElementOffset: function () {
    this._$element.css({
        left: -(this._$element[0].offsetWidth / 2),
        top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
    });
},

onCloseClick: function (e) {
    e.preventDefault();

  this.events.fire('userclose');
},

_isElement: function (element) {
    return element && element[0] && element.find('.arrow')[0];
}
}),


var clusterer = new ymaps.Clusterer({
    clusterDisableClickZoom: false,
    clusterOpenBalloonOnClick: true,
    clusterBalloonPanelMaxMapArea: 0,
    clusterBalloonMaxHeight: 200,
    clusterBalloonItemContentLayout: customItemContentLayout,
    clusterBalloonWidth: 315,            
    hideIconOnBalloonOpen: false,
    clusterBalloonLayout: MyBalloonLayout
});

points = [
[55.831903,37.411961], [55.763338,37.565466], [55.763338,37.565466], [55.744522,37.616378], [55.780898,37.642889]     ]
var placemark = new ymaps.Placemark(points, {
    balloonLayout: MyBalloonLayout,
    balloonContentBody: "тело метки",
}); 

placemarks.push(placemark);
clusterer.add(placemarks);
whereMap.geoObjects.add(clusterer);
});
                        
 

5 комментариев
Подписаться на комментарии к посту
макеты передаются в опциях – 3-й параметр в конструктор метки, а не в данных – 2-ой параметр
dimik,
извините,напишите пожалуйста как это будет выглядеть
ork.nosov2016,
var placemark = new ymaps.Placemark(
/** Это первый параметр – координаты */
points,
/** Это второй параметр – данные */
{
balloonContentBody: "тело метки"
},
/** Это третий параметр – опции */
{
balloonLayout: MyBalloonLayout,
});

Так же нужно передавать balloonContentLayout, указанный в шаблоне
тут
'$[[options.contentLayout observeSize minWidth=315 maxWidth=auto ]]' +
dimik,
пишу следующее эффекта никакого
var placemark = new ymaps.Placemark(temp, {
balloonContentHeader: "Магазины",
balloonContentBody: bodyContent,
},
{
balloonLayout: MyBalloonLayout
balloonContentLayout:MyBalloonLayout
},
{
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: '../img/product/hearts.png',
// Размеры метки.
iconImageSize: [50, 50],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-20, -20]
});
ork.nosov2016,
Нужна ссылка на страницу с этим кодом