Клуб API Карт

Клуб API Карт

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

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

Всем привет.

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

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

 

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

 

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

15 комментариев
Авторизуйтесь, чтобы оставить комментарий
Алексей Yarrr!
28 января 2016, 03:40

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

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

Sergei Gromkov
28 января 2016, 03:40

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

 

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.


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

dimik
28 января 2016, 03:40

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

balloonImageHref

balloonImageOffset

и balloonImageSize

?

mari-na-bzzz
28 января 2016, 03:40

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

Sergei Gromkov
28 января 2016, 03:40

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

mari-na-bzzz
28 января 2016, 03:40

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

Sergei Gromkov
28 января 2016, 03:40

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

sivashyov
28 января 2016, 03:40

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

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

manikin.vick
28 января 2016, 03:40

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

naumchenko88
28 января 2016, 03:40

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

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

Sergei Gromkov
28 января 2016, 03:40

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

 

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/

Sergei Gromkov
28 января 2016, 03:40

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

naumchenko88
28 января 2016, 03:40

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

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

Sergei Gromkov
28 января 2016, 03:40

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

 

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

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

    cityCollection.add(myPlacemark);

naumchenko88
28 января 2016, 03:40

Спасибо за ответ! Я тоже храню в 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