Клуб API Карт

Создание макета балуна для полного изменения его внешнего вида + кастомная кнопка закрытия

p7161
31 августа 2012, 13:32

В этом примере показано как полностью изменить внешний вид балуна - все очень просто.

А вот как к подобному измененному балуну прикруть кастомную кнопку закрытия?

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

            ymaps.layout.storage.add('balloon#maximize', ymaps.templateLayoutFactory.createClass(

                ''+

                ''+

                ''));

            map.balloon.open(self.placemark.geometry.getCoordinates(), {

                    contentBody : obj.text ,

                    contentHeader: obj.js.header || ''

                },{

                closeButtonLayout : 'balloon#maximize' ,

                maxWidth: 280,

                offset: [20, -32]

            });

И что с этим делать? Больше похоже на копипасту вне контекста вопроса

  вам правильно написал - используйте фабрику макетов для создания своего макета кнопки закрытия и передайте его метке в опции "balloonCloseButtonLayout" или балуну напрямую в опции "closeButtonLayout"

вы же написали - "все очень просто". 

я и дал Вам кусок из проекта - там все тоже просто ;-)

http://www.pomnivoinu.ru/map/index1.php

вот как это работает

Это какими надо обладать телепатическими способностями, чтобы по тому куску кода, что вы дали в первом комментарии понять: что вы прявязали к карте собственные события, что вы получаете data-action по клику на элемент с классом action, затем вызываете map.events.fire со значением полученным из этого data-action и только потом по этому событию у вас происходит map.balloon.close();


В общем как я и сказал сначала - абсолютно бесполезная копипаста куска кода вырванная из контекста

 

map.balloon.close(); - собственно все, что мне нужно было узнать.


В итоге правильный ответ на мой вопрос:

balloonContent: 'Я живу тут!myMap.balloon.close()" class="custom_close_button">Закрыть'


само-собой myMap должна быть глобальной переменной, но это уже детали

 

И никаких фабрик макетов

как раз нет.

правильный ответ в создании макета.

а то, что вы называете "правильным" - костыль.

потому что для кнопки закрытия сделан собственный контейнер и опция для макета closeButtonLayout.

А то, что расковыряли мой код - это было бессмысленно. Если вы разобрались с кастомизацией баллуна ("все очень просто"), то мой код для вас должен быть простым.

не надо быть оракулом, чтобы по аналогии с кастомизацией тела баллуна, понять кастомизацию кнопки "закрыть".

Ок, наверно я не правильно сформулировал свой вопрос.

Вероятно он должен был звучать так:

"А вот как к подобному измененному балуну прикруть кастомную кнопку закрытия? + чтобы эта кнопка работала"


Ведь сам факт использования макета кнопки закрытия и передачи его в closeButtonLayout - не делает эту кнопку рабочей.


Отсюда ещё один вопрос: зачем вообще создавать макет для кнопки, если я могу на любом html элементе внутри balloonContent: вызывать по клику myMap.balloon.close() (не важно будет ли это onclick или jquery .on() или ещё как-то)

Разница в том что вам не нужно будет вызывать самому myMap.balloon.close(), а также вешать обработчик и создавать глобальные переменные.


Если вы хотите это делать сами, не забудьте снять обработчик после закрытия балуна, иначе балун будет удален из DOM дерева, а ваш обработчик так и останется и будет кушать память, и при открытии нового балуна будет новый обработчик и т.д.

У меня подобная проблема. И как я вижу, кто-то кого-то не понимает. 

Вот смотрите, есть код: 

 

                var btnClose = ymaps.templateLayoutFactory.createClass(                    '', {                    build: function() {                        this.constructor.superclass.build.call(this);                    },                                        clear: function() {                        this.constructor.superclass.clear.call(this);                    }                                                     });                                             mMap.clusterEvents = new ymaps.Clusterer({                    clusterBalloonMainContentLayout: tCenterRow,                    clusterBalloonSidebarItemLayout: tLeftRow,                    clusterBalloonCloseButtonLayout: btnClose,                    clusterBalloonMinWidth: 796,                    clusterBalloonWidth: 546,                    clusterBalloonSidebarWidth: 250,                    clusterBalloonShadow: false                 }); 

но при клике на кнопку закрытия балун не закрывается. Вопрос, надоли внутри фабрики что-то прописывать для этого случая специально или это проблема не в картах, а собственном коде?

конечно

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

Я буду очень благодарен, если вы поделитесь правильным(с т.з API 2.0) решением на этом примере.

 чтото типа этого

        myBalloonCloseButtonLayout = ymaps.templateLayoutFactory.createClass('x', {            build: function () {                this.constructor.superclass.build.call(this);                $('#close-balloon-link').on('click', $.proxy(this.onCloseClick, this));            },            clear: function () {                $('#close-balloon-link').off('click');                this.constructor.superclass.build.call(this);            },            onCloseClick: function () {                this.getData().geoObject.balloon.close();            }        });

Огромное спасибо!

Если у кого-то, как и у меня балун открывается для кластера, то используйте вместо:

this.getData().geoObject.balloon.close();

вот эту сторку:

this.getData().cluster.balloon.close();

Воспользовался вашим примером. Не работает. Помогите, пожалуйста. Вот код:

 var myBalloonCloseButtonLayout = ymaps.templateLayoutFactory.createClass('x', {

        build: function () {

            this.constructor.superclass.build.call(this);

            $('#close-balloon-link').bind('click', $.proxy(this.onCloseClick, this));

        },

        clear: function () {

            $('#close-balloon-link').unbind('click', $.proxy(this.onCloseClick, this));

            this.constructor.superclass.build.call(this);

        },

        onCloseClick: function () {

            this.getData().geoObject.balloon.close();

        }

    });

ymaps.layout.storage.add('my#balloonclosebuttonlayout', myBalloonCloseButtonLayout);

 

var coords = [

            {c:[57.635268, 39.84494], properties:{

                name:'Название точки',

                balloonContent:'Я живу тут!',

                type:'Тип стsdfsdfия'

            }},

            {c:[57.625323, 39.853867], properties:{

                name:'Название точки',

                type:'Тип строения',

                balloonContent:'контент балуна'

            }, options:{

                hideIconOnBalloonOpen:false,

                balloonContentSize:[100, 100],

                balloonLayout:"default#imageWithContent",

                balloonImageHref:'/lk/img/balloon.png',

                iconImageHref:'/lk/img/icons/home-gray.png',

                // Смещение картинки балуна

                balloonImageOffset:[27, -248],

                // Размеры картинки балуна

                balloonImageSize:[538, 390],

                // Балун не имеет тени

                balloonShadow:false,

                balloonCloseButtonLayout:'my#balloonclosebuttonlayout' // вот это не работает

            }},

            {c:[57.616113, 39.86348], properties:{

                name:'Название точки',

                type:'Тип строения',

                hintContent:'Hint Content',

                placeMarkId:'12345'

            }},

            {c:[57.617955, 39.884766], properties:{

                name:'Название точки',

                type:null

            }},

            {c:[57.636004, 39.917725], properties:{

                name:'Название точки',

                type:'Тип строения'

            }},

            {c:[57.634067, 39.851359], properties:{

                name:'Свердлова, 96.7',

                type:'Тип строения'

            }, options:{

                iconImageHref:'/lk/img/icons/home-gray.png',

                iconImageOffset:[-10, -50]

            }}

 

        ],

        myCollection = new ymaps.GeoObjectCollection({}, {

            preset:'twirl#redIcon' //все метки красные

            //draggable:true // и их можно перемещать

        });

 

 

$(coords).each(function (i, o) {

        //console.info(o);

        myCollection.add(new ymaps.Placemark(o.c, o.properties, o.options)); // добавляем точки в коллекцию

    })

 

myMap.geoObjects.add(myCollection); // Добавление геобъектов на карту

1. 

balloonLayout:"default#imageWithContent",

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

 

2.  

 $('#close-balloon-link').unbind('click', $.proxy(this.onCloseClick, this));

этот код не отпишет слушателя от кнопки, т.к. вызов $.proxy каждый раз возвращает новую функцию. т.е. тут у вас утечка памяти 

 

 

Комментарий удалён
jnonishe,
Создайте новую тему и соберите пример со своим кодом на jsfiddle 
Не надо размещать его в посте