Клуб API Карт

Клуб API Карт

"Резиновый" балун кластера

Пост в архиве.

Здравствуйте. Помогите разобраться с балуном http://romansl.cybers.net.ua/bal.php можно как-то указать чтобы балун тянулся под контент, речь идет о кластере в котором несколько меток. Проблема просто в том что если инфа одной метки объемная, а второй поменьше то балун всеравно остается большим.

8 комментариев
Авторизуйтесь, чтобы оставить комментарий
mari-na-bzzz
28 января 2016, 03:50

1. Почему мы не стали делать резиновый балун

В стандартном балуне кластера слева список, справа контент. Если балун станет тянущимся, то он при переключении пунктов меню будет становиться шире-уже, это не очень здорово.

 

2. Если все-таки очень надо

Тут есть несколько подходов.

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

Или вы можете задать минимальную ширину и высоту кластера, а потом при добавлении контента как-то хачить стили, чтобы балун был вынужден растягиваться (при этом варианте я не могу ничего гарантировать).

iytin-ne
28 января 2016, 03:50

У меня только что получилось настроить высоту и ширину кластера под контент при открытии балуна. а как мне б приклеиться к смене активной метки в этом балуне? я пробую через переопределение класса

MyMainContentLayout = ymaps.templateLayoutFactory.createClass

но что-то когда я вписываю в

 onStateChange: function () {
                           alert('вот тут наверное снова нужно определить высоту и ширину');
                            var newActiveObject = this.getData().state.get('activeObject');
                            if (newActiveObject != this.activeObject) {
                                this.activeObject = newActiveObject;
                                this.applyContent();
                            }
                        },

просто вывод сообщения то при переключении мне сообщение не выскакивает.

 

 

mari-na-bzzz
28 января 2016, 03:50

var currentCluster = null,

     stateListener = null,

     activeObject = null;

clusterer.events.add('balloonopen', function (e) {

     currentCluster = e.get('target');

     activeObject = currentCluster.state.get('activeObject');

     console.log('count size');

     stateListener = currentCluster.state.events.group();

    stateListener.add('change', function () {

        if (currentCluster.state.get('activeObject') != activeObject) {

               console.log('count size');

        }

     });

 });

clusterer.events.add('balloonclose', function () {

     stateListener.removeAll();

     stateListener = null;

     activeObject = null;

     currentCluster = null;

 });

iytin-ne
28 января 2016, 03:50

Вот что у меня получилось по коду:

group.events.add('balloonopen', function (e) {
    var geoObjects=[];
    var cluster = e.get('target'),
    geoObjects = cluster.properties.get('geoObjects');
    currentCluster = e.get('target');
     activeObject = currentCluster.state.get('activeObject');
     cluster.options.set({
            balloonWidth:213,
            balloonHeight:'100%'
            });
     stateListener = currentCluster.state.events.group();
     stateListener.add('change', function () {
        if (currentCluster.state.get('activeObject') != activeObject) {
                console.log('change')
                currentCluster.options.set({
                    balloonHeight:'105%'
                });
        }
     });
    if(geoObjects){
    geoObjects.forEach(function(index, i){
        (function (currentGeoObject) {
            currentGeoObject.properties.set({
                clusterCaption: i+1
            });
            })
            (index);
        })
    }
});
group.events.add('balloonclose', function () {
     stateListener.removeAll();
     stateListener = null;
     activeObject = null;
     currentCluster = null;
 });

вот ссылка на страницу http://romansl.cybers.net.ua/bal.php

получается когда я открываю балун, то балун стает по высоте как надо (100%), когда делаю активным второй элемент то балун подстраивается под него, но вот когда снова возвращаюсь на предыдущий то размеры уже не те что нужно =(

 

mari-na-bzzz
28 января 2016, 03:50

if (currentCluster.state.get('activeObject') != activeObject) {
                console.log('change')
                currentCluster.options.set({
                    balloonHeight:'105%'
                });

               // совсем забыла про вот это действие

               activeObject =  currentCluster.state.get('activeObject');
        }


Я сильно удивлена, что работает задание высоты в процентах ))

iytin-ne
28 января 2016, 03:50

=) это все методом перебора, было найдено.

теперь вроде нормально работает, посмотрите пожалуйста  http://romansl.cybers.net.ua/bal.php

 

mari-na-bzzz
28 января 2016, 03:50

Я бы попробовала как-то поизящнее с высотой поиграться - слишком дергается балун.

А так да, работает)

iytin-ne
28 января 2016, 03:50

поизяшней мне только снится, пока хоть так и то довольный)) Спасибо за помощь!