Клуб API Карт

Пока не получу вменяемого ответа не успокоюсь)

allians-sk
22 апреля 2015, 20:09

Вообщем вот . Балун опен, что я делал.

добавил в функцию карты вот это 

 

 MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="popover top">' +
                '<a class="close" href="#">&times;</a>' +
                '<div class="arrow"></div>' +
                '<div class="popover-inner">' +
                '$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]' +
                '</div>' +
                '</div>', {
                /**
                 * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
                 * @function
                 * @name build
                 */
                build: function () {
                    this.constructor.superclass.build.call(this);
                    this._$element = $('.popover', this.getParentElement());
                    this.applyElementOffset();
                    this._$element.find('.close')
                        .on('click', $.proxy(this.onCloseClick, this));
                },
                /**
                 * Удаляет содержимое макета из DOM.
                 * @function
                 * @name clear
                 */
                clear: function () {
                    this._$element.find('.close')
                        .off('click');
                    this.constructor.superclass.clear.call(this);
                },
                /**
                 * Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
                 * @function
                 * @name onSublayoutSizeChange
                 */
                onSublayoutSizeChange: function () {
                    MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
                    if(!this._isElement(this._$element)) {
                        return;
                    }
                    this.applyElementOffset();
                    this.events.fire('shapechange');
                },
                /**
                 * Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.
                 * @function
                 * @name applyElementOffset
                 */
                applyElementOffset: function () {
                    this._$element.css({
                        left: -(this._$element[0].offsetWidth / 2),
                        top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
                    });
                },
                /**
                 * Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
                 * @function
                 * @name onCloseClick
                 */
                onCloseClick: function (e) {
                    e.preventDefault();
                    this.events.fire('userclose');
                },
                /**
                 * Используется для автопозиционирования (balloonAutoPan).
                 * @function
                 * @name getClientBounds
                 * @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
                 */
                getShape: function () {
                    if(!this._isElement(this._$element)) {
                        return MyBalloonLayout.superclass.getShape.call(this);
                    }
                    var position = this._$element.position();
                    return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
                        [position.left, position.top], [
                            position.left + this._$element[0].offsetWidth,
                            position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
                        ]
                    ]));
                },
                /**
                 * Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
                 * @function
                 * @private
                 * @name _isElement
                 * @param {jQuery} [element] Элемент.
                 * @returns {Boolean} Флаг наличия.
                 */
                _isElement: function (element) {
                    return element && element[0] && element.find('.arrow')[0];
                }
            }),
    // Создание вложенного макета содержимого балуна.
        MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
            '<h3 class="popover-title">$[properties.balloonHeader]</h3>' +
                '<div class="popover-content">$[properties.balloonContent]</div>'
        ),
map.balloon.open(map.getCenter(), {
               
            }, { layout: MyBalloonLayout,
contentLayout: MyBalloonContentLayout
                 });

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

 

.popover {
            display: block;  }
        .popover .close {
            position: absolute;
            right: 5px;
            top: 1px;
        }
        .btn {
            margin-top: 10px;
        }
    </style>
  <script src="http://yandex.st/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

 и не пашет , если прикрутить к кнопки ( то есть там у меня balloon1.open) кнопка не появляется вообще. А если прикрутить к событию типо клик в любом месте откроется балун, то нечего не происходит, он не открывается. Ладно. Метод 2

 

map.balloon.open(map.getCenter(), {
               
            }, { layout: "default#imageWithContent",
                    // Картинка балуна
                    imageHref: 'images/oblo1.png',
                  imageOffset: [-200, -200],
                 contentSize: [700, 500],
                    // Размеры картинки балуна
                  imageSize: [700, 500]
                 });

 

Это работает к собитию клик в любом месте, то есть балун с нужной картинкой открывается. Прикручиваю к кнопке , меняю на map.balloon1.open , кнопка опять не появляется. Вот код кнопки, я его уже писал

 

function sloy2() {
           
var balloon1 = new ymaps.Balloon(map);
// Здесь родительскими устанавливаются опции карты,
// где содержатся значения по умолчанию для обязательных опций.
balloon1.options.setParent(map.options );
  
ButtonLayout2 = ymaps.templateLayoutFactory.createClass(
            "<div class='my-button {% if state.selected %}my-button-selected{% endif %}'>" +
                "{{data.content}}" +
                "</div>"
        ),
            
        button2 = new ymaps.control.Button({
            data: {
            },
            options: {
                layout: ButtonLayout2
 
            }
        });
    button2.events
    .add('select', function() {
balloon1.open(map.getCenter(),'<p style="text-align: center;">Компания "Brand Girl"</p> <p style="text-align: center;">приветствует Вас на нашем сайте!</p>'+
'<p style="text-align: center;">Мы работаем с 2015 года</p>'
                    
       );
    }) 
    .add('deselect', function() { balloon1.close(map.getCenter());
});        
    map.controls.add(button2);
}

 Как мне это реализовать, ПОЖАЛУЙСТА ответьте кодом а не ссылкой на документатиции. И еще , что ваше сообщество состоит из трех человек? только они и отвечают.

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

лучше дать ссылку на этот код

не хотел показывать этот проект тут , ну ладно вот http:...  . Это демка, и там не поставлен тот самый код балуна, просто результат я описал , а так кот токой же. Хотел спросить, это возможно рекламная площадка для брендов, не нарушает ли она вашей лицензии?

Я по описанию ошибки находить не умею.

Напишите шаги для воспроизведения ошибки

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

У вас ошибка при попытке доступа к несуществующему ключу "balloon1" у карты map.balloon1 

а как мне сделать его существуюим?

я не понял вопроса.

у карты уже есть ссылка на балун – map.balloon.

Зачем нужно поле balloon1?

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

Просто написали бы что например balloon1 вообще работать не будет. Разобрался сам, хотя как подлючить свой стил балуна через  ymaps.templateLayoutFactory.createClass так и не понял. Мне это нужно что бы просто знать.

    myMap.balloon.open(myMap.getCenter(), { content: 'aaa' }, {

        contentLayout: ymaps.templateLayoutFactory.createClass('{{ content }}')

    });