Клуб API Карт

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

lolobrigit
10 июня 2015, 16:57

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

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

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

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

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

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

    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');

        });

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

 

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

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!

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

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

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

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

$(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

 

                                              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?

listObject.balloon.isOpen()

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

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

 

как это сделать?

 

Кажется полнял: вместо myMap.balloon.open -  listObject.balloon.open прописал правильно?

listObject.balloon.open()

Так и сделал, спасибо.

Всё таки остался еще вопрос:

у меня маркер открытого балуна уходин на задний план если я перемещаюсь по списку.

Хотя  я делаю для клика пункта списка zindex 10000

для наведении на пункт списока 1000

при покидании пункта списка 200