Вообщем вот . Балун опен, что я делал.
добавил в функцию карты вот это
MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="popover top">' +
'<a class="close" href="#">×</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>
<link href="http://yandex.st/bootstrap/2.3.2/css/bootstrap.min.css " rel="stylesheet">
<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);
}
Как мне это реализовать, ПОЖАЛУЙСТА ответьте кодом а не ссылкой на документатиции. И еще , что ваше сообщество состоит из трех человек? только они и отвечают.