Клуб 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