Событие открытия/закрытия balloon

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

Алексей

10 июня 2015, 16:57

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

Суть в том что при клике на точку открывается balloon и должен менять preset для этой точки, при закрытии preset должен вернуться.

Заранее спасибо.

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

Авторизуйтесь, чтобы оставить комментарий

dimik

27 января 2016, 22:39

Что именно не получается?

Алексей

27 января 2016, 22:39

Не понятно как узнать что произошло событие закрытие balloon

dimik

27 января 2016, 22:39

myMap.geoObjects.events

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

// Ссылку на объект, вызвавший событие,

// можно получить из поля 'target'.

e.get('target').options.set('preset', 'islands#greenIcon');

})

.add('balloonclose', function (e) {

e.get('target').options.unset('preset');

});

Алексей

27 января 2016, 22:39

Дмитрий, огромное спасибо, еще вопрос:

Имеются пресеты:

ymaps.option.presetStorage.add('custom#store', {
    iconLayout: 'default#image',
    iconImageHref: '/blue-dot.png',
});
    ymaps.option.presetStorage.add('custom#place', {
    iconLayout: 'default#image',
    iconImageHref: '/yellow-dot.png',

});
ymaps.option.presetStorage.add('custom#brewery', {
    iconLayout: 'default#image',
    iconImageHref: '/orange-dot.png',

});
    ymaps.option.presetStorage.add('custom#active', {
    iconLayout: 'default#image',
    iconImageHref: '/green-dot.png',
});
    ymaps.option.presetStorage.add('custom#mouseenter', {
    iconLayout: 'default#image',
    iconImageHref: '/green-dot.png',
});

Событие открытие закрытие балуна и изменение пресета:

myMap.geoObjects.events
        .add('balloonopen', function (e) {
            e.get('target').options.set('preset', 'custom#active');
        oldtarget = target;
        })
        .add('balloonclose', function (e) {
          pointtyperet = e.get('target').properties.get('pointtype');
          if (pointtyperet == 'place') {represet = 'custom#place';}
          else if (pointtyperet == 'store') {represet = 'custom#store';}
          else if (pointtyperet == 'brewery') {represet = 'custom#brewery';}
          e.get('target').options.set('preset', represet);    });

А также имеется динамический список точек при наведении на пункты которого меняется preset выделенного объекта:

                        mouseenter: function (e) {
                          if ($(e.currentTarget).data('geoObject').options.get('preset') == 'custom#active') {}
                          else {
                              $(e.currentTarget).data('geoObject').options.set('preset', 'custom#mouseenter');
                              $(e.currentTarget).data('geoObject').options.set('zIndex', 1000);}},
                        mouseleave: function (e) {
                          if ($(e.currentTarget).data('geoObject').options.get('preset') == 'custom#active'){$(e.currentTarget).data('geoObject').options.set('preset', 'custom#active');} /* в теории объект должен оставаться custome#active*/
                          else if ($(e.currentTarget).data('geoObject').properties.get('pointtype') == 'place'){$(e.currentTarget).data('geoObject').options.set('preset', 'custom#place');}
                          else if ($(e.currentTarget).data('geoObject').properties.get('pointtype') == 'brewery'){$(e.currentTarget).data('geoObject').options.set('preset', 'custom#brewery');}
                          else if ($(e.currentTarget).data('geoObject').properties.get('pointtype') == 'store'){$(e.currentTarget).data('geoObject').options.set('preset', 'custom#store');}
                          else {$(e.currentTarget).data('geoObject').options.unset('preset');};
                          $(e.currentTarget).data('geoObject').options.set('zIndex', 200)},
                        click: function (e) {
                          e.preventDefault();
                          myMap.balloon.open(
                          $(e.currentTarget).data('geoObject').geometry.getCoordinates(),
                          $(e.currentTarget).data('geoObject').properties.get('balloonContentHeader')+'
'+
                          $(e.currentTarget).data('geoObject').properties.get('balloonContentBody')+'
'+
                          $(e.currentTarget).data('geoObject').properties.get('balloonContentFooter'));};

В итоге остается проблема что при клике на пункт списка открывается балун (так как при наведении на пункт сработал mouseenter, то preset стал сначала custom#mouseenter) и должно срабатывать event balloonopen и preset должен меняться на custom#active, но похоже этого не происходит, т.к. переводя фокус на другой объект списка, preset предыдущего меняется согласно правилу mouseleave else if, то есть по сути не отрабатывает первое правило if!

dimik

27 января 2016, 22:39

Какой-то адский ад, как вы сами в этих if-ах что-то понимаете? Это все можно переписать в 2 раза короче.

И зачем открывать отдельно балун через myMap.balloon.open, если можно открыть балун геообъекта? Видимо поэтому и пресет не меняется

Алексей

27 января 2016, 22:39

Может быть и можно, но не хватает знаний, черпаю из примеров.

dimik

27 января 2016, 22:39

Хотя бы зачем писать каждый раз эти колбАсы

$(e.currentTarget).data('geoObject').options.get('preset') == 'custom#active'

Используйте переменную:

var geoObject = $(e.currentTarget).data('geoObject');

geoObject.options.get('preset') == 'custom#active'

Ну и вместо 10 if-else иногда лучше один switch

Алексей

27 января 2016, 22:39

                                              mouseleave: function (e) {
                            var listObject = $(e.currentTarget).data('geoObject');

                            if (listObject.options.get('preset') == 'custom#active'){listObject.options.set('preset', 'custom#active');}
                            else {

                                switch (listObject.properties.get('pointtype'))
                            {
                                 case "place":
                                 listObject.options.set('preset', 'custom#place');
                                 break;
                                case "store":
                                 listObject.options.set('preset', 'custom#store');
                                 break;
                                 case "brewery":
                                 listObject.options.set('preset', 'custom#brewery');
                                 break;
                                 default:
                                 listObject.options.unset('preset');
                            }; }

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

Можно ли как то для if (listObject.options.get('preset') == 'custom#active'){listObject.options.set('preset', 'custom#active');} сделать проверку открытли для этой точки balloon?

dimik

27 января 2016, 22:39

listObject.balloon.isOpen()

Алексей

27 января 2016, 22:39

Спасибо, так работает, только теперь вопрос: