Клуб API Карт

Содержимое балуна дублируется [Решено]

Пост в архиве.
taipovm
30 марта 2012, 02:40

Хочу менять содержимое балуна, в зависимости от метки которая открыта. Взял из примера код 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]

};

1 комментарий
Ну в принципе логично.
Судя по коду у вас на setBalloonContent вызывается onAddToParent а этот метод просто добавляет значение к контейнеру, не делая его очистки.

Попробуйте заменить  YMaps.jQuery(parentNode).append(this.element); на YMaps.jQuery(parentNode).empty().append(this.element);