Клуб API Карт

Стилизация балуна для всех объектов в Кластере

Пост в архиве.
belyanskii
7 августа 2012, 18:09

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

вот пример

 

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

Буду признателен за разъяснения.

 

myPlacemark = new ymaps.Placemark([-19.76, 127.505887], {
// Контент балуна
balloonContent: '

Я живу тут!

'
}, {
// Не скрывать иконку метки при открытии балуна
hideIconOnBalloonOpen: false,
// Изображение иконки метки
iconImageHref: 'http://www.ohranatruda.ru:8080/upload/resize_cache/main/746/150_150_1/koala1.jpg',
// Размеры изображения иконки
iconImageSize: [70, 80],
// Размеры содержимого балуна
balloonContentSize: [100, 100],
// Задаем макет балуна - пользовательская картинка с контентом
balloonLayout: "default#imageWithContent",
// Картинка балуна
balloonImageHref: '/maps/doc/jsapi/2.x/examples/images/thoughts.gif',
// Смещение картинки балуна
balloonImageOffset: [70, -130],
// Размеры картинки балуна
balloonImageSize: [120, 100],
// Балун не имеет тени
balloonShadow: false
});

 

Если это важно - данные я получаю из yaml файла, на данный момент в файле прописан шаблон вывода балунов.

 

 

<repr:balloonContentStyle>
<repr:template>#baloonTemplate</repr:template>
</repr:balloonContentStyle>
<repr:Template gml:id="baloonTemplate">
<repr:text>
<![CDATA[<div><h4>$[name]</h4><img src="http:$[metaDataProperty.link]" alt=""/></div></div>]]>
</repr:text>
</repr:Template>
11 комментариев

Проблема в создании макета или в том, как задать опцию сразу для всех объектов кластера?

как создать опцию для всех объектов кластера я наверное понимаю :) а как мне для них всех задать параметры, подобные тем что указаны в примере :(

Также, только нужно приписать префикс 'cluster' к названиям опций.

без примера не пойму :)

я в посте показал код, который стилизует балун....но это параметры метки и балуна её. А я же делаю как-то так:

 

 

    var objectBaloon = ymaps.templateLayoutFactory.createClass("1111", {        // Не скрывать иконку метки при открытии балуна        hideIconOnBalloonOpen: false,        // Изображение иконки метки        iconImageHref: 'http://www.ohranatruda.ru:8080/upload/resize_cache/main/746/150_150_1/koala1.jpg',        // Размеры изображения иконки        iconImageSize: [70, 80],        // Размеры содержимого балуна        balloonContentSize: [100, 100],        // Задаем макет балуна - пользовательская картинка с контентом        balloonLayout: "default#imageWithContent",        // Картинка балуна        balloonImageHref: 'http://www.ohranatruda.ru:8080/upload/resize_cache/main/746/150_150_1/koala1.jpg',        // Смещение картинки балуна        balloonImageOffset: [70, -130],        // Размеры картинки балуна        balloonImageSize: [120, 100],        // Балун не имеет тени        balloonShadow: false    });

и подозреваю что это совсем не то :)

 

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

clusterer.options.set(

    clusterBalloonContentLayout: ymaps.templateLayoutFactory.createClass('!!!</div>')

);

 

В этом случае вы перезададите внутренности балуна.

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

это я тоже уже знаю :)

но тут мы просто указываем содержимое балуна, а мне надо его стилизовать, поставить свою картинку на фон т___т

и при всем этом балуны кластера (нажатие на кластер а не на точку) должны быть так же стилизованны подобным образом...

Вы можете абсолютно как угодно стилизовать макет балуна, если вы его перезадаете, с помощью css.

clusterer.options.set(

    clusterBalloonContentLayout: ymaps.templateLayoutFactory.createClass('!!!')

);

Или я неточно поняла суть задачи?

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

clusterer.options.set(

    clusterBalloonLayout: ymaps.templateLayoutFactory.createClass('http://www.ohranatruda.ru:8080/upload/resize_cache/main/746/150_150_1/koala1.jpg">')

);

понял :) счастье было так близко...  ^____^

 

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

тут правая часть
Как поменять фон у балуна, но приэтом структура балуна осталась бы прежней?