Клуб API Карт

Полностью кастомный балун метки[РЕШЕНО]

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

Полностью кастомный балун метки без  balloonLayout: "default#imageWithContent", // Картинка балуна balloonImageHref: 'newbaloon.png',
помогите сделать полность видоизмененный балун, смотрел в песочнице и примерах нашел только с помощью  balloonImageHref: 'newbaloon.png'  или просто изменение внитренней части балуна. Для первого Апи такой пример есть, возможно есть и на API 2/

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

Пример такой есть, но мы им пока не делились, т.к. там есть нерешенные проблемы и он пока не работает как надо.

Так что на твой страх и риск...

спасибо большое, а что тут работает не так? ну чтобы я понял насколько это критично.

На самом деле, если у тебя нет динамического содержимого в балуне, т.е. ты в него ничего не загружаешь, например, AJAX-ом чтобы при этом он менял свои размеры после открытия, то все сильно проще и всякая магия с observeSize в макете тебе не нужна. Можно тогда взять за основу пример из этой статьи

хэх, как-раз нужно динамически все подгружать через AJAX.  Да еще потом и кластерный балун видоизменить, буду пока разбираться что да как, но надеюсь вы решите эту проблему и для простого балуна и для кластерного, читал пост где говорилось о скором выходе примера кластерного, но как я понял загвоздка и там и там с observeSize,  и пока её не решите никаких примеров не будет)

Да, делаем...

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

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

Пока слишком много магии нужно для этого кейса чтобы заставить правильно работать автопан. Да и с магией он не работает пока ))

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

Здравствуй. Справился с шаблоном для метки кластера, а по такому же принцыпу начал делать макет для кластерного балуна метки, но возникла проблема, не могу полностью изменить левую часть Sidebar, точней нашел в песочнице как изменить контент внутри Sidebarа  а вот как его полностью переделать ничего не нашел. У меня задача сделать что-то типа  cluster#balloonCarouselContent.

можешь что-то посоветовать?

советую взглянуть на исходники АПИ в режиме debug

у меня http://api-maps.yandex.ru/2.0.25/?lang=ru-RU&load=package.full,util.math.bounds&mode=debug  но открыв его, я не увидел ничего похожего на шаблоны чего-нибудь. пока глухо(

это же всего лишь загрузчик. основной код АПИ приезжает потом и асинхронно. см. на вкладке сетевой активности *.combine.xml

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

Вижу вы уже с autopan-ом разобрались, или то мне показалось?)

 

 

пока нет

Должны починить в 2.0.26

Пример хорший, но после дня испытаний и разборки полЁта, я никак не могу разобраться с этим куском кода

 _loadMainContent: function (geoObject) {
                ymaps.geocode(geoObject.geometry.getCoordinates())
                    .then(
                        $.proxy(this._onContentLoaded, this)
                    );
            },
            _onContentLoaded: function (res) {
                this.$mainContent.html($.tmpl(this.mainContentTemplate, {
                    name: 'hlkjlkj'
                }));
            },

конечно это все из-за слабенького знания скриптов то всеже возник такой вопрос.

пытаюсь вместо геокодера просто передать функции _onContentLoaded п значение geoObject чтобы потом просто по шаблону вытащить значения и закинуть их в this.$mainContent.html($.tmpl(this.mainContentTemplate, {
                    name: geoObject.properties.get('name')
                }));

но что-то выкидывает ошибки, и я незнаю как его обойти(

чтобы попасть на кластерный балун нужно нажать на кластер со значением (7) а потом на левый с (2)

Тут ничего магического нет,

_loadMainContent - ходит в обычный геокодер,

вызывая _onContentLoaded когда ответ будет получен.

 

Прочитай про jQuery Templates, вроде бы даже статья на хабре была, он достаточно простой.

Либо ты можешь взять любой другой шаблонизатор (на jQuery Templates свет клином не сходится) или вовсе обойтись без шаблонизатора и клеить html как js-строки

да, магии то конечно не много, до покрутится пришлось)

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

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

то возник вопрос, как бы его, оптимально сделать, чтобы работало оперативно. пока написал такое:

 _inLoads:function(res){               
                if (res.properties.get('ch')!=1) {//проверка были внесены изменения или нет
                    this._onTimeOutLoaded();//шаблон с тексом ожидания загрузки
                }else{
                    this._onContentLoaded(res);//шаблон контента
                    this._applyElementOffset();//обновление позиций
                }
            },

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

думал еще setTimeOut кинуть, но потом подумал что мысль глупая.

или все же проще перенести функционал с открытия балуна в _inLoads()?

пример все там же...

Что в примере, что у тебя все подгружается асинхронно и динамически.

then - это лишь стандартизированный интерфейс (promise) можно вместо него и jQuery.ajax использовать, не важно.

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

 

В твоем случае если ты загружаешь данные снаружи, то обновляешь потом поля геообъекта и тут есть 2 варианта:

1. эти поля используются в шаблоне

в этом случае твой макет перестроится сам (будет вызван метод clear, потом build)

2. эти поля не используются в шаблоне

тогда ты сам заботишься о том чтобы обновить нужные ноды

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

у него есть поле events и событие "change",

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