Клуб API Карт

Клуб API Карт

Проблема с установкой балуна метки.

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

http://jsfiddle.net/z3pjcnLq/1/

На vue написан компонент (не суть важно), в который можно передавать координаты меток и они будут перерисовываться при изменении переданных координат.

Проблема: 1. Загрузили страницу, кликнули на 'icon 4', имитируется загрузка с сервера, текст в balloon висит 'Загрузка...', хотя данные уже подгрузились. Закрываем его, открываем заново, данные на месте.

2.Клик 'icon 5', надписи 'Загрузка...' нет, данные подгрузились и не выводятся до тех пор, пока не закроем/откроем снова этот balloon

3. В кластере аналогично. Например, если после загрузки карты открыть кластер, и кликнуть по нескольким элементам списка, то видно, что текст 'Загрузка...' пишется только тогда, когда мы переключимся на другой элемент списка, а потом снова на этот.

Проблема возникает здесь

setBalloon(obj) {
    if (this.loadingBalloon[obj.id]) return;
    this.loadingBalloon[obj.id] = true;
    if (!obj.properties.balloonContent) {
        obj.properties.balloonContent = 'Загрузка...'; // это ставится
        this.loadInfo(obj.id, (ok, data) => {
            if (ok) {
                obj.properties.balloonContent = data; // здесь содержимое balloon должно обновиться, в памяти оно обновляется
                console.log(obj.properties.balloonContent); // выводится
            } else {
                obj.properties.balloonContent = null;
            }
            this.loadingBalloon[obj.id] = false;
        });
    }
},

В разных примерах также советуют делать obj.properties.set('balloonContent', data), однако такого метода нет (obj.properties.set is not a function).

P.S. Все работает за исключением того, что приходится открыть/закрыть/и снова открыть balloon, чтобы данные отобразились. Если данные были ранее подгружены для этой конкретной метки, то все в порядке.

В редких случаях при самом первом клике по метке после загрузки карты содержимое balloon обновляется автоматически (т.е. видно 'Загрузка...' и затем загруженная информация), но непонятно, что на это влияет (гонок здесь не смог найти).

2 комментария
Авторизуйтесь, чтобы оставить комментарий
dimik
4 июня 2017, 09:50
Загрузку данных проще делать через макет балуна
http://jsfiddle.net/1dpotvy6/11/
vasily.pripyatko
7 июня 2017, 12:19
Решил так




ymapBalloonForceUpdate(obj) {
const objBalloon = this.ymapObjectManager.objects.balloon.getData();
if (objBalloon) {
if (obj.id === objBalloon.id) {
// Форсировать отрисовку данных
this.ymapObjectManager.objects.balloon.open(obj.id);
}
}
const clusterBalloon = this.ymapObjectManager.clusters.balloon.getData();
if (clusterBalloon) {
const activeObject = this.ymapObjectManager.clusters.state.get('activeObject');
if (activeObject && activeObject.id === obj.id) {
const isOpen = this.ymapObjectManager.clusters.balloon.isOpen(clusterBalloon.id);
if (isOpen) {
this.ymapObjectManager.clusters.balloon.open(clusterBalloon.id);
}
}
}
},
setBalloon(obj) {
if (this.loadingBalloon[obj.id]) return;
this.loadingBalloon[obj.id] = true;
if (!obj.properties.balloonContent) {
obj.properties.balloonContent = 'Загрузка...';
this.ymapBalloonForceUpdate(obj);
this.loadInfo(obj.id, (ok, data) => {
if (ok) {
obj.properties.balloonContent = data;
this.ymapBalloonForceUpdate(obj);
}
this.loadingBalloon[obj.id] = false;
});
}
},