Клуб API Карт

Как открыть несколько балунов одновременно?

Пост в архиве.
mwebb
26 апреля 2012, 19:49

Доброго времени суток. 

Проблема такая: нужна возможность держать открытыми несколько балунов на карте. 

Как сделать? Все пишут, что только один балун возможен. Подойдет даже вариант, копирования содержимого балуна в какой-нибудь div контейнер. 

 

p.s. Примеры смотрел, облако тегов смотрел, схожие темы смотрел. Ничего не нашел  

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

Может быть Вам лучше подойдут метки  тянущиеся под контент?

http://api.yandex.ru/maps/doc/jsapi/2.x/examples/markersiconcontent.html

Зачем вам именно несколько балунов?

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

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

я вам рекомендую использовать свои макеты для содержимого Stretchy меток 

http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml

сделать макет можно реализовав интерфейс http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/ILayout.xml

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

http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/templateLayoutFactory.xml

Ясно. Спасибо! 

Но как предотвратить закрытие открытых балунов 

переопределяя метод clear не помогло

clear: function () {

//this._$element.find('.close')

//.off('click');

 

//this.constructor.superclass.clear.call(this);

},

В каком объекте/классе вы его пытаетесть переопределять? Каким образом у вас открыто несколько балунов?

Опишите ситуацию подробнее. Так непонятно о чем речь.

var myMap;

    // Дождёмся загрузки API и готовности DOM.
    ymaps.ready(init);

    function init () {
        myMap = new ymaps.Map('yamap', {
            center: [55.0281, 73.2479], // Москва
            zoom: 17
        });

   
     //Отменяем стандартный балун
    myMap.geoObjects.options.set('hasBalloon', false);

    myMap.geoObjects.events.add('click', function(e){
        var placemark = e.get('target'),
            //Создаем инстанцию вручную
            balloon = new ymaps.Balloon(placemark.getMap(), {
                properties: placemark.properties
            }),
            position = placemark.geometry.getCoordinates();

        //Устанавливаем родительские опции   
        balloon.options.setParent(placemark.options);
        balloon.open(position);

        placemark.options.set('visible', false);
        balloon.events.once('close', function(){
            //Скрываем метку   
            placemark.options.set('visible', true);
        });
    });   

    myPlacemark = new ymaps.Placemark([55.0285, 73.2487], {
        balloonContent: 'ПРИВЕТ'
    }, {
        preset: 'islands#icon',
        iconColor: '#0095b6'
    });
    
     myMap.geoObjects.add(myPlacemark);


    // Создание метки с пользовательским макетом балуна.
    myPlacemark2 = window.myPlacemark2 = new ymaps.Placemark([55.0274,73.2490], {
        balloonContentHeader: "Балун метки2",
        balloonContentBody: "Содержимое балуна метки2",
        balloonContentFooter: "Подвал2"
    }, {
        preset: 'islands#icon',
        iconColor: '#9995b6'
    });

    myMap.geoObjects.add(myPlacemark2);
    myPlacemark2.balloon.open();


    }

 

 

//Почему то содержимое балунов пустое и не чего не могу туда передать! Спасибо

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

Вы могли бы исправить данный код чтобы он работал, заранее очень благодарю,

Да и нужно чтобы балуны уже были открыты по умолчанию!

 Я имел ввиду это:

myMap.geoObjects.events.add('click', function(e){        var placemark = e.get('target'),
            //Создаем инстанцию вручную
            balloon = new ymaps.Balloon(placemark.getMap()),
            position = placemark.geometry.getCoordinates();

        //Устанавливаем родительские опции    
        balloon.options.setParent(placemark.options);
        balloon.open(position, {                properties: placemark.properties
            });

        placemark.options.set('visible', false);
        balloon.events.once('close', function(){
            //Скрываем метку    
            placemark.options.set('visible', true);
        });
    });    

 

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

 

Да все работает очень хорошо спасибо, но при открытии балона при загузке карты почему-то вылазит ошибка: Не пойму к какому объекту обращаться тогда? 

 

myPlacemark.balloon.open();

myPlacemark2.balloon.open();

 

У myPlacemark2 нет .balloon, т.к. вы запретили его создание опцией hasBalloon: false. Поэтому ошибка.
myPlacemark.balloon тоже не существует по тем же причинам. Вы создаете балун в обработчике клика. Если он вам нужен после, то сохраняйте ссылку на него где-то.

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

Будут метки. Почему нет?