Клуб API Карт

Автоматическое закрытие balloon

lazukin.arteom
19 мая 2016, 14:34

Имеется кусок кода, отвечающий за создание карты, отрисовке на ней геообъектов и вслывание balloon каждые две секунды после загрузке карты, balloon на карте может быть сколько угодно(там кусок кода есть, реализующий это)! Вопрос в том, как после того, когда рандомный balloon спустя открылся, закрыть именно его, а не какой-то рандомный, как при открытии?

$(document).ready(function(){

    var init = function(){
        //Задание карты с заданными ей свойствами
        var map = new ymaps.Map('myMap', {
            center: [52.90674361274675,39.783653058593764],
            zoom: 6,
            type: 'yandex#map',
            behaviors:['drag'],
            controls: []
        });
        //~Задание карты с заданными ей свойствами

        //Коллекция объектов на карте (координаты(1 и 2 элемент массива) и цена)
        var cities = [
            [55.40504493415047, 37.68696099999997, '26 744'],
            [51.29946272572973, 36.181741499999994, '27 744'],
            [52.20358425779387, 39.65623749999995, '28 744'],
            [48.23081201653842, 44.59330799999996, '29 744'],
            [52.77205544424585, 50.121080499999925, '30 744'],
            [55.98450253160213, 43.99012599999996, '31 744'],
            [51.21427263552067, 39.23621100000003, '32 744']
        ];
        myCollection = new ymaps.GeoObjectCollection();
        //~Коллекция объектов на карте (координаты(1 и 2 элемент массива)  и цена)

        //Макет балуна и его описание
        var MyBalloonLayout = ymaps.templateLayoutFactory.createClass("<div class='cost'>{{properties.balloonContent}}&nbsp;</div>", {
                build: function () {
                    this.constructor.superclass.build.call(this);
                    this._$element = $('.cost', this.getParentElement());
                    this.applyElementOffset();
                },
                applyElementOffset: function () {
                    this._$element.css({
                        left: -(this._$element[0].offsetWidth / 2),
                        top: -(this._$element[0].offsetHeight)
                    });
                },
                getShape: function () {
                    if(!this._isElement(this._$element)) {
                        return MyBalloonLayout.superclass.getShape.call(this);
                    }
                    var position = this._$element.position();
                    return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
                        [ position.left + this._$element[0].offsetWidth, position.top - this._$element[0].offsetHeight],
                        [ position.left - this._$element[0].offsetWidth, position.top + this._$element[0].offsetHeight ]
                    ]));
                },
                _isElement: function (element) {
                    return element && element[0];
                }
        });
        //~Макет балуна и его описание

        //Выстраивание объектов на карте с заданными им свойствами
        for (var i = 0; i < cities.length; i++) {
            var city = cities[i];
            var placemark = new ymaps.GeoObject(
                {
                    geometry: {
                        type: "Point",
                        coordinates: [city[0], city[1]]
                    },
                    properties: {
                        balloonContent: city[2]
                    }
                },
                {
                    iconLayout: 'default#image',
                    iconImageHref: 'img/mark.png',
                    iconImageSize: [18, 18],
                    draggable: false,
                    balloonContentLayout: '245345345',
                    balloonLayout: MyBalloonLayout,
                    balloonShadow: false,
                    hideIconOnBalloonOpen: false,
                    balloonCloseButton: true
                }
            );
            myCollection.add(placemark);
        }

//Показ нескольких balloon на карте      

 map.geoObjects.events.add('balloonopen', function (e) {
            var placemark = e.get('target');
            var balloon = new ymaps.Balloon(placemark.getMap());
            var position = placemark.geometry.getCoordinates();

            balloon.options.setParent(placemark.options);
            balloon.open(position, { properties: placemark.properties });

            placemark.options.set('visible', true);
            balloon.events.once('close', function () {
                placemark.options.set('visible', true);
            });
            setTimeout(function () { $('.cost').addClass('click') }, 10);
        });

//~Показ нескольких balloon на карте      
        
        map.geoObjects.add(myCollection);
        //~Выстраивание объектов на карте с заданными им свойствами

        //Рандомное открытие balloon после загрузки карты
        function getRandomObject (collection) {
            var length = myCollection.getLength();
            var index = Math.floor(Math.random() * length);
            return myCollection.get(index);
        }

        setTimeout (function openRandomObject () {
            var current = getRandomObject(map.geoObjects);
            current.balloon.open();
            setTimeout(openRandomObject, 2000);
        }, 2000);
        // ~Рандомное открытие balloon после загрузки карты 
    }
    ymaps.ready(init);
});