Клуб API Карт

Новый релиз карт. Балун выходящий за границы карты.

iytin-ne
30 августа 2012, 19:56

Здравствуйте. Вот наконец-то вышел новый релиз карт, после выхода которого должа была исправиться ошибка с тенью балуна который выходит за границы карты. Если не сложно можно пример как сделать таким (выходящим за границы карты), балун кластера и метки.

25 комментариев
Подписаться на комментарии к посту

На следующей неделе планируем доделать пример с балуном.

var placemark = new ymaps.Placemark([55.76, 37.64], {}, {

balloonPane: 'movableOuters',

balloonShadowPane: 'movableOuters'

});

Добрый вечер Марина. Спасибо вам за примерчик, но он у меня не работает.

вот код которым я создаю метки

function createMetka(id,x,y,id_s){//функция создания метки и всей параметров для нее
   

     var coord=new Array();     
        coord.push(x);
        coord.push(y);
        if(myCollection[id_s]==null){
            myCollection[id_s] =[]; 
        }
        myPlacemark[id] = new ymaps.Placemark(coord,
        {  
            myid:id,
            body : 'Загрузка...',
            change:0
        },
        {
            balloonPane: 'movableOuters',
            balloonShadowPane: 'movableOuters',
            balloonMinWidth:500,
            balloonMinHeight:300,
            balloonAutoPanMargin:[100,250],
            balloonContentBodyLayout:myBalloonContentBodyLayout,
            preset: setStyle(id_s-1)
        });
        myCollection[id_s].push(myPlacemark[id]);
        myPlacemark[id].events.add('balloonopen', loadContentBalloon);
        myPlacemark[id].events.add('balloonclose', function(){open=null;});
  }

то что-то не тогда вообще перестают появляться одиночные балуны. вот примеры моих проектов где я пробовал это

http://romansl.cybers.net.ua/mapUFA.php и http://svadbagolik.cybers.net.ua/index2.php#

 

У меня все практически заработало!

Может вы забыли подключить 2.0.15: http://api-maps.yandex.ru/2.0.15/?load=package.full&lang=ru-RU

 

Вот только в моей версии балун перестал скрываться когда метка переходит границу карты!

 Вот рабочий код:

    Примеры. Добавление меток на карту.       

Показ балуна после клика на метку

Марина здравствуйте) Вчера исправил ошибки и таки получилось чтобы балун выходил на пределы карты, но есть два момента один важный второй оочень важный.

1) Где я туплю, почему балун когда выдвигаеться за рамки карты, он не закрывается?

2)

balloonPane: 'movableOuters',

balloonShadowPane: 'movableOuters'

они что не влияют на балун кластера?

  http://svadbagolik.cybers.net.ua/index2.php?center=55.74743192927775,37.537236300331934&type=map&zoom=17&r=м международная&cat=&BO=269

 

 

Для кластера надо задавать эти опции с префиксом cluster

clusterBalloonPane

clusterBalloonShadowPane

Спасибо, с кластером разобрался, а что насчет первого вопроса?

почему балун когда выдвигается за рамки карты, он не закрывается?

Знаю что надоел. Но перепробовав кучу подстановок, так ничего нормально работающего не получилось =(

вот два кода первый это что срабатывает при клике на обычную метку

......

       myPlacemark[id].events.add('balloonopen', loadContentBalloon);//привязка к открытию простого балуна
        myPlacemark[id].events.add('balloonclose', function(){open=null;eventsGroup.removeAll();});
  }

function loadContentBalloon(e){
   ......
     mapSize = myMap.container.getSize();
     if(eventsGroup){
            eventsGroup.removeAll();
        }
     if(myMap.balloon.isOpen()){
        eventsGroup = myMap.action.events.group().add('tick', function () {
                var mapCenter = myMap.action.getCurrentState().globalPixelCenter,
                    mapBounds = [
                        [mapCenter[0] - mapSize[0] / 2, mapCenter[1] - mapSize[1] / 2],
                        [mapCenter[0] + mapSize[0] / 2, mapCenter[1] + mapSize[1] / 2]
                    ];
            
                // Проверяем, находится ли балун в видимой области

                    if (!isPointInBounds(mapBounds, e.get('balloon').getPosition())) {              
                        myMap.balloon.close();
                        eventsGroup.removeAll();
                        our=1
                    }
            });
     }
        function isPointInBounds (mbr, point) {
            return point[0] >= mbr[0][0] && point[0] = mbr[0][1] && point[1]         }

а второй кусок код привязывается к открытию балуна кластера

 

cluster.events.add('balloonopen', function (e) {
.....
     mapSize = myMap.container.getSize();
     if(eventsGroup){
            eventsGroup.removeAll();
        }
     if(myMap.balloon.isOpen()){
        eventsGroup = myMap.action.events.group().add('tick', function (e) {
                var mapCenter = myMap.action.getCurrentState().globalPixelCenter,
                    mapBounds = [
                        [mapCenter[0] - mapSize[0] / 2, mapCenter[1] - mapSize[1] / 2],
                        [mapCenter[0] + mapSize[0] / 2, mapCenter[1] + mapSize[1] / 2]
                    ];
                    var our=0,oldpos;
                // Проверяем, находится ли балун в видимой области
                    if (!isPointInBounds(mapBounds, e.get('balloon').getCoordinates())) {              
                        myMap.balloon.close();
                        eventsGroup.removeAll();
                        our=1
                    }
            });
     }
        function isPointInBounds (mbr, point) {
            return point[0] >= mbr[0][0] && point[0] = mbr[0][1] && point[1]         }

....

Вот со вторым и начинаются проблемы. Если нету прописывать код для балуна кластера, то обычный балун нормально срабатывает и закрывается когда нужно, но при этом кластерный балун с нескольукими метками не скрывается. а вот когда вставляю такой же код в событие открытия кластерного балуна то тогда и простой балун начинает ругаться. не могу понять почему простой балун реагирует на событие кластерного(



Вам не надо навешиваться отдельно на метки и кластера, все балуны так или иначе работают через map.balloon. Поэтому вам нужно просто добавить в чистом виде код, приведенный ajaxy, и все должно заработать.

Вот такой код вписал я, основываясь на   

               /*
 * Далее по коду скрываем балун, когда точка его привязки выходит за видимую область на карте.
 */

            mapSize = myMap.container.getSize();
        myMap.balloon.events
            // При открытии балуна начинаем слушать изменение центра карты
            .add('open', function (e) {
                eventsGroup = myMap.action.events.group().add('tick', function () {
                    var mapCenter = myMap.action.getCurrentState().globalPixelCenter,
                        mapBounds = [
                            [mapCenter[0] - mapSize[0] / 2, mapCenter[1] - mapSize[1] / 2],
                            [mapCenter[0] + mapSize[0] / 2, mapCenter[1] + mapSize[1] / 2]
                        ];

                    // Проверяем, находится ли балун в видимой области
                    if (!isPointInBounds(mapBounds, e.get('balloon').getPosition())) {
                        //myMap.balloon.close();
                       
                        console.log('вышел за пределы');
                    }
                });
            })
            // При закрытии балуна удаляем слушатели
            .add('close', function () {
                eventsGroup.removeAll();
            });

        function isPointInBounds (mbr, point) {
            return point[0] >= mbr[0][0] && point[0] = mbr[0][1] && point[1]         }

но при таком варианте у меня любое движение балуна призводит до вывода записи в консоле, которая означает условно закрытие балуна.

У вас mapSize вычисляется в тот момент, когда контейнер карты имеет нулевую высоту. Из-за этого балун как будто всегда вне карты.

вот я село) Вы правы, поправил теперь работает как надо. Но тут возник еще вопрос, как быть с "inertia" как сделать так чтобы и по инерции когда карта движеться проверялось входит ли балун в карту?

И еще раз обновили пример, перенесли в Песочницу: http://api.yandex.ru/maps/jsbox/balloon_out_of_map

Андреев Дмитрий
18 февраля 2014, 13:55

Пример из песочницы не работает под 2.1-dev. Это временная проблема или поддержка данного параметра не планируется?

Так же тестировал упрощенный код:

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        });
    var placemark = new ymaps.Placemark(myMap.getCenter(), {
        balloonContentBody: "Офис Яндекса в Москве"
    }, {
        balloonPane: 'movableOuters',
        balloonShadowPane: 'movableOuters'
    });
    myMap.geoObjects.add(placemark);
});

Балун не открывается, а после вторго нажатия ошибка:

TypeError: this._ie is undefined
http://api-maps.yandex.ru/2.1.5/release/combine.xml?modules=3_3$9s_p9l8,8Q9o,4,29e3F3M9T_9_*.i.l.k_J_Z.d_q_!.e3R3w02030S0W010L0M0N*X9v$N3,4b4k4p4I4o4D4E3Qqo,m._.z!a.(.)9$$c$d9!9J9,9q$m4N$h4y*M*P$4$8$_4f!e!l!m!t!n!o!i!k!u!w!v!x!y)h)H)y)W)R)D4u.u4S4T4X4344484$49)M)V6I(e(i*Z(c4Y(d(l(n.Y0H0O0T0X3u3D3H3I3N393!3)3q3J4c4g4l4r4v4A4F4K4O4U40454_4.4!4*4(4)4q4j4z6F8q8j8z9c9f9g9h9k9t9u9w979-9*9j9Z$e$i$M$X$1$2$3$5$9_h_i_n_t_w_x_y_A_B_C_4_-_(_j.a.f.U.X.0.3.4.5.6.8.9.$...,.Q!b!f!p!)!,!q*h*i*k*l*m*n*r*s*t*u*v*w*x*y*A*E*F*G*H*I*K*L*N*(*)*,*z*Q*J(a(b(f(g(h(k(o(p(r(C(6(7(8(9($(-(_(.(!(*)v)A)E)I)N)S,n,oqkqn&callback=ymapsymaps2_1_5_loader3_3$9s_p9l8,8Q9o,4,29e3F3M9T_9_*.i.l.k_J_Z.d_q_!.e3R3w02030S0W010L0M0N*X9v$N3,4b4k4p4I4o4D4E3Qqo,m._.z!a.(.)9$$c$d9!9J9,9q$m4N$h4y*M*P$4$8$_4f!e!l!m!t!n!o!i!k!u!w!v!x!y)h)H)y)W)R)D4u.u4S4T4X4344484$49)M)V6I(e(i*Z(c4Y(d(l(n.Y0H0O0T0X3u3D3H3I3N393!3)3q3J4c4g4l4r4v4A4F4K4O4U40454_4.4!4*4(4)4q4j4z6F8q8j8z9c9f9g9h9k9t9u9w979-9*9j9Z$e$i$M$X$1$2$3$5$9_h_i_n_t_w_x_y_A_B_C_4_-_(_j.a.f.U.X.0.3.4.5.6.8.9.$...,.Q!b!f!p!)!,!q*h*i*k*l*m*n*r*s*t*u*v*w*x*y*A*E*F*G*H*I*K*L*N*(*)*,*z*Q*J(a(b(f(g(h(k(o(p(r(C(6(7(8(9($(-(_(.(!(*)v)A)E)I)N)S,n,oqkqn
Line 175
/*
* Далее по коду скрываем балун, когда точка его привязки выходит за видимую область на карте.
*/

var eventsGroup,
    // Пиксельные размеры карты
    mapSize = map.container.getSize();

map.balloon.events
    // При открытии балуна начинаем слушать изменение центра карты
    .add('open', function (e) {
        eventsGroup = map.action.events.group().add('tick', function () {
            var mapCenter = map.action.getCurrentState().globalPixelCenter,
                mapBounds = [
                    [mapCenter[0] - mapSize[0] / 2, mapCenter[1] - mapSize[1] / 2],
                    [mapCenter[0] + mapSize[0] / 2, mapCenter[1] + mapSize[1] / 2]
                ];
   
            // Проверяем, находится ли балун в видимой области
            if (!isPointInBounds(mapBounds, e.get('balloon').getPosition())) {
                map.balloon.close();
            }
        });
    })
    // При закрытии балуна удаляем слушатели
    .add('close', function () {
        eventsGroup.removeAll();
    });
   
function isPointInBounds (mbr, point) {
    return point[0] >= mbr[0][0] && point[0] = mbr[0][1] && point[1] }

Есть три проблемы в примере:

1. При перемещении по инерции за пределы карты, балун не скрывается.

2. При выходе за пределы карты балун закрывается, хотя, по аналогии со стандартным балуном, должен только скрываться и вновь отображаться, если метка появится в пределах карты.

3. При изменении масштаба, в большинстве случаев балун остается открытым, но пощелкав Ваш пример, я нашел масштаб, при котором балун все же закрывается, хотя за пределы карты он не выходил.

да, я тоже это заметил, я думал что в релизе запилят полный аналог стандартного балуна, только с возможностью изменения pane (или как там правильно)

да, вы правы, но возникла некоторая проблема с "вновь отображаться, если метка появится в пределах карты"

как мы ее решим - пример будет обновлен, и отпишем в этой теме

пример обновлен!

ООО, большое спасибо. Как раз то, что надо!

так то вроде все заработало только вот при уменьшении зума выскакивает ошибка, в предыдущем варианте все работало нормально.

TypeError: this._balloonView is null
return this._balloonView.getLayout()
http://svadbagolik.cybers.net.ua/index2.php#и подскажите пожалуйста, это нормально что при изменении зума балун закрываеться? можно как-то сделать чтобы он не закрывался?

нашел небольшой баг у вашем примере, http://svadbagolik.cybers.net.ua/map.php

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

TypeError: this._Ep is null

) и не закрывая, подвиньте карту влево чтобы было видно вторую метку которую раньше скрыли, в результате покажется два балуна на карте и один из них крестиком не закрывается.