Хочу менять содержимое балуна, в зависимости от метки которая открыта. Взял из примера код SampleBalloonLayout, который делает костомный вид балуна.
Повесил обработчик на собитие BalloonOpen функцию showInfoInBaloon которая меняет содержимое. Проблемма в том, что если несколько раз кликнуть по одной и той же метке то к старому содержимому метки добавляется новое, а ожидается только новое содержание.
Содержимое балуна : "Test", кликнули на метку, стало "Test Адрес", потом "Test Адрес Адрес"
Причем если использовать стандартный стиль для балуна (тупо не меняя style.balloonStyle) то такой проблемы нет.
var mapInit = function() {
var SampleBalloonLayout = function() {
this.element = YMaps.jQuery(
"<div class=\"b-simple-balloon-layout\">\
<div class=\"content\"></div>\
<div class=\"close\"></div>\
<div class=\"tail\"></div></div>");
this.close = this.element.find(".close");
this.content = this.element.find(".content");
this.disableClose = function(){
this.close.unbind("click").css("display", "none");
};
this.enableClose = function(callback){
this.close.bind("click", callback).css("display", "");
return false;
};
this.onAddToParent = function (parentNode) {
YMaps.jQuery(parentNode).append(this.element);
this.update(
};
this.onRemoveFromParent = function () {
this.element.remove(
};
this.setContent = function (content) {
content.onAddToParent(this.content[0]
};
this.update = function () {
this.element.css("margin-top", this.getOffset().getY()
};
this.getOffset = function () {
return new YMaps.Point(0, -this.content.height() - 45);
};
};
var map = new YMaps.Map(YMaps.jQuery("#map_canvas")
var mskCenter = new YMaps.GeoPoint(37.64, 55.76);
map.setCenter(mskCenter, 12);
var style = new YMaps.Style(
style.balloonStyle = {template: new YMaps.LayoutTemplate(SampleBalloonLayout)};
style.iconStyle = new YMaps.IconStyle(
style.iconStyle.offset = new YMaps.Point(-22, -46);
style.iconStyle.href = "/media/images/blue.png";
style.iconStyle.size = new YMaps.Point(26, 46);
style.iconStyle.shadow = new YMaps.IconShadowStyle(
style.iconStyle.shadow.offset = new YMaps.Point(0, -25);
style.iconStyle.shadow.href = "/media/images/blue-shadow.png";
style.iconStyle.shadow.size = new YMaps.Point(25, 23);
YMaps.Styles.add("map#bluePoint", style);
var mark = new YMaps.Placemark(mskCenter, {style: style}
mark.description = "Test";
map.addOverlay(mark);
var showInfoInBaloon = function(mark) {
var content = '<div id="vcard">Адрес</div>';
mark.setBalloonContent(content);
};
YMaps.Events.observe(mark, mark.Events.BalloonOpen, showInfoInBaloon);
};
YMaps.load( mapInit
UPD: решение было найдено тут
Надо было метод переписать так:
this.setContent = function (content) {
YMaps.jQuery($(this.content[0]).text("")
content.onAddToParent(this.content[0]
};