Клуб API Карт

Поменять фоновое изображение балуна кластера

smthngStrange
24 ноября 2014, 17:54

Добрый день! Столкнулся со следующей проблемой. Перевел карты на использование кластеров, не понимаю, как задать собственную картинку-подложку балуна кластера. Подложка обычного Placemark устанавливаетсяч довольно просто:

 

 

var placemark = new ymaps.Placemark([lt, lg], {
...
}, {

balloonImageHref: '/путь_к_картинке.png'

});

 

 

Пытаюсь делать нечто подобное при создании кластера - и ничего не выодит. Пробовал по-разному, например, так:

 

 

var clusterer = new ymaps.Clusterer({

clusterBalloonImageHref: ...

})

 

 

 

Как достичь желаемого результата наиболее простым способом? В документации нашел только описание работы с лэйаутами:

 

 

var layout = ymaps.templateLayoutFactory.createClass({

...

});

var clusterer = new ymaps.Clusterer({

clusterBalloonLayout = layout

})

 

 

Но при таком способе пеерписывается все стандартное содержимое балуна кластера, а мне надо только фон поменять. Причем не понятно даже, как в кастомном лэйауте использовать элементы стандартного двухпанельного лэйаута кластера.

 

9 комментариев

Вам нужно внутрь балуна вставить фоновое изображение или заменить фон вообще для всего балуна?

Да, фон балуна целиком, не самого контента балуна.

Тогда надо полностью переопределить макет балуна кластера. Пример есть в песочнице

https://tech.yandex.ru/maps/jsbox/2.1/cluster_custom_balloon_content_layout_21

Использовать элементы дизайна стандартного кластера в произвольном макете представляется мне нереальным.

Странно как-то: для обычного балуна можно просто фон поменять одной опцией, для кластера - нет...

 

Спасибо за помощь

А какой опцией можно поменять фон обычного балуна?

Дык я же писал, balloonImageHref

 Вы наверное заменяете balloonLayout у меток?

Да, именно так, вот что делаю:

       

balloonOptions: {
            balloonLayout: 'default#imageWithContent',

            balloonImageHref: тот_самый_фон_баллуна,
            balloonImageOffset: [-245, -245],
            balloonImageSize: [550, 238],

            balloonContentSize: [465, 185]
        },

И все довольно просто решается в случае с обычными метками, а вот с кластерами также сделать не получается

Вы по сути вместо макета для балуна задаете макет для метки с текстом.

Вы можете и для кластеров задать макет этой же метки с текстом, но в таком случае вам нужно при создании кластера сформировать у кластера содержимое поля balloonContent на основе его состава и картиночный макет так же заведется