Клуб API Карт

Изменение внешнего вида балуна

SGromkov
13 сентября 2012, 15:42

Всем привет.

Есть проблема: Нужно изменить внешний вид балуна, убрать стандартные закругления олей, стандартный хвостик. Везде написано как это сделать указав balloonLayout: "default#imageWithContent"

Но мне не нужно менять его на картинку, картинка ведь не растягивается по вертикали. А мне нужен балун, который вертикально растягивается. Все обыскал, нигде не нашел примеров или адекватного решения, как заменить внешний вид балуна на собственный растягивающийся вертикально блок.

 

Как это можно сделать?

 

Раньше делал так: задавал  balloonLayout: "default#imageWithContent", ставил невидимую картинку в один пиксель размером, а внутрь балуна помещал собственный блок, с position:absolute. И это очень здорово работало во всех браузерах кроме IE. В IE мой блок невидно, из-за одного из родительских тэгов, в котором бэкграундом устанавливается картинка. Так как, в IE для тэга в котором хранится картинка балуна <ymaps class="ymaps-image-with-content"> прописывается стиль overflow:hidden, а в остальных браузерах этот стиль не добавляется тэгу. 

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

Вам нужно побороть шаблонизатор, создать свой шаблон и настроить/описать его поведение.

Делается через http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/templateLayoutFactory.xml

Решил эту проблему. Сделал так:

 

balloonContent: 'любой текст, любой величины'

balloon-box это блок высота которого изменяется в зависимости от содержимого. Что важно, - блок растет наверх. Подогнал позицию блока так, чтобы он был прямо там, где была метка.

 

А вот опции коллекции, где я устанавливаю стиль баллуну:

 

myCollection.options.set({

iconImageHref: '/images/icon-red.png', // картинка иконки

                iconImageSize: [22, 28], // размеры картинки

                iconImageOffset: [-11, -30], // смещение картинки

hideIconOnBalloon: true,

balloonLayout: "default#imageWithContent",

                //balloonImageHref: '/images/balloon-image.png',

                //balloonImageOffset: [-56, -157], 

                //balloonImageSize: [346, 153],

balloonShadow: false,

balloonAutoPan: false

});

 

Так работает в любом браузере. Видимо, если мы не устанавливаем свойство balloonImageHref, то диву( в который эта картинка задается бэкграундом) не устанавливается свойство overflow: hidden.


А в документации ямапс могут разобраться только те, кто разрабатывал ямапс. Похожу,что те кто писал документацию сами в ней до конца не разбираются. Иначе бы написали подробнее, а не создавали ямапс клубы, перекидывая не плечи модераторов и юзеров объяснение работы с апи. 

а где вы в документации прочитали про такие опции?

balloonImageHref

balloonImageOffset

и balloonImageSize

?

Да, есть такая проблема. Но мы над этим работаем.

Только не добавляйте оверфлоу:хидден, если не указана картинка, пожалуйста. Не хочется все переделывать. Сейчас все аккуратненько на соплях держится и бог с ним=)

Вы всегда можете подключать конкретную версию АПИ, на которой ваш сайт гарантированно работает. И тогда наши новые релизы у вас никогда ничего не сломают.

Это здорово) Спасибо.

Модет кому пригодится. Если нужно убрать только "хвостик" у балуна, можно использовать скрипт, делающий ширину хвостика 0px: $(".ymaps-b-balloon__sprite_type_tail").width(0);

Только тогда нужно отключить тень через shadow: false, т.к. тень от хвостика останется.

спасибо огромное! про доки согласен с вами 1000%

Добрый день! Я тоже таким способом показываю балун.

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

А я сдвигаю не балун, а центр всей карты по клику на метку:

 

function clickOnPlacemark(e){

 

    // Получаем метку, по которой кликнули

    var placemark = e.get('target');

 

    // Получаем координаты метки

    var coords = '' + placemark.geometry.getCoordinates();

 

    // Разбиваем координаты по запятой (чтобы широта и долгота были в отдельных ячейках)

    var arcoords = coords.split(',');

 

    // Получаем текущий масштаб карты (нужно, чтобы понимать насколько градусов сдвигать балун)

    var zoom = myMap.getZoom();

 

 

    // Опеделяем для каждого масштаба градусы сдвига

    switch (zoom){

        case 10: sdvigY = 0.30; sdvigX = 0.056; break;

        case 11: sdvigY = 0.15; sdvigX = 0.028; break;

        case 12: sdvigY = 0.0744; sdvigX = 0.014; break;

        case 13: sdvigY = 0.037; sdvigX = 0.0072; break;

        case 14: sdvigY = 0.0181; sdvigX = 0.0036; break;

        case 15: sdvigY = 0.00925; sdvigX = 0.0018; break;

        case 16: sdvigY = 0.0047; sdvigX = 0.0009; break;

        case 17: sdvigY = 0.00237; sdvigX = 0.0004; break;

        case 18: sdvigY = 0.00115; sdvigX = 0.0002; break;

    }

 

    // Сдвигаем центр карты

    myMap.setCenter([parseFloat(arcoords[0]) + parseFloat(sdvigX), parseFloat(arcoords[1]) + parseFloat(sdvigY)], zoom, {duration: 500});

}

 

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

 

Вот здесь работающая карта: http://map.miele.ru/ru/

Ну и мой способ работает только с балунами фиксированных размеров.

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

Скажите, у вас на карте тоже много меток. Они где вобще хранятся, в БД у вас? Если да, то каким способ вы их выводите на карту? Спасибо.

Города и магазиныв храню в отдельных таблицах MySql. При формировании страницы тащу на php из базы все города и все магазины. Внутри js-скрипта, в котором формируется карта, на php в цикле создаю метки и закидываю их в коллекцию.

 

    // Создаем метку (это уже java script-е):

    myPlacemark = new ymaps.Placemark([,], {},{});

    cityCollection.add(myPlacemark);

Спасибо за ответ! Я тоже храню в mysql, но достаю другим способом:

 

$.getJSON("vivodpointsmap.php",

function(json){ 

for (i = 0; i < json.markers.length; i++) {

//vivodpointsmap.php передает сформированный массив json.markers[] в формате json //внутри цикла уже идет создание меток:myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {интересно, какой из способов будет работать быстрее... надо будет проверить, но это я смогу сделать, когда будет много меток, а они у меня создаются пользователями, поэтому это будет не скоро...если вам тоже инетересно и есть возможность проверить, могу написать код скрипта vivodpointsmap.php