Клуб API Карт

Открыть балун

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

Здравствуйте, код работает ок. Однако стоит переместить карту из видимости кластера как балун перестает появляться, а было бы здорово чтобы при клике карта скролилась на нужный объект и открывался балун. 

function init() {

    // Создаем класте и добавляем элементы

    GeoObjects[0] = statMap.setGeoObjectPoint({...});

 

    clusterer = new ymaps.Clusterer({

        clusterDisableClickZoom: false,

        clusterBalloonHeight: 360

    });

    clusterer.add(GeoObjects);

    map.geoObjects.add(clusterer);

    

    // После клика ищем терущий эелемент и открываем его балун

    var ID = 1;

    var current = findObjectById(ID);

    var geoObjectState = clusterer.getObjectState(current);

    geoObjectState.cluster.state.set('activeObject', current);

    geoObjectState.cluster.balloon.open();

}

 

// поиск нужного геообъекта

findObjectById = function(id) {

    var i = 0, group;

    while (group = GeoObjects[i++]) {

        if (group.properties.get('ID') === id) {

            return group;

        }

    }

    return null;

}

 

// Создаем геообъект

function setGeoObjectPoint(value) {

    return new ymaps.GeoObject({

        geometry: {type: "Point", coordinates: value.coordinates},

        properties: {

            ID: value.ID,

            clusterCaption: value.address,

            balloonContentBody: value.details + '<div><img src="' + value.photo + '"></div>',

            body: '<img src="' + value.photo + '">',

            fullname: value.fullname,

            date: value.time

        }

    }, {

        balloonContentHeaderLayout: ymaps.templateLayoutFactory.

                createClass('<div>$[properties.clusterCaption]</div>'),

        balloonContentBodyLayout: ymaps.templateLayoutFactory.

                createClass('$[properties.ID] <div>$[properties.balloonContentBody]</div>'),

        balloonContentFooterLayout: ymaps.templateLayoutFactory.

                createClass('<i>$[properties.fullname]</i>'

                        + '<i>$[properties.date]</i>')

    });

}

 

5 комментариев

У нас есть пример, где реализовано нужное вам поведение http://dimik.github.io/ymaps/examples/piechart-clusterer/cluster-status.html

Благодарю за ответ, сделал по примеру, но точно знаю что моему заказчику не понравится если честно и сам не в восторге:

- кликнув происходит задержка на 1-2 секунды

- карта начинает дергаться при перемещении

- балун тоже дергается без нужды при каждом клике

- создается впечатление что карта перегружена и медленно работает

А дергается видимо из за map.panTo

 

Подскажите возможно сделать такой же эфект только без panTo?

Вот это само по себе работает идеально)

balloon = map.balloon.open([], {}); 

 

Что то типа cluster.balloon.open([current.geometry.getCoordinates()]); не работает если увести карту далеко от местаназначения(

Вы можете заменить panTo на map.setCenter, тогда карта будет перемещаться мгновенно в нужную точку

Спасибки то что надо. Единственный минус когда карта становится по центру, балун при открытии пытается тоже централизоваться, из за этого он дергается)

Что тут можно сделать

1. Можно убрать таймаут, который стоит на анимирование смещения карты при открытии балуна.

clusterer.options.set({

    clusterBalloonAutoPanDuration: 0,

    balloonAutoPanDuration: 0

});

 

2. Можно отключить вообще автопан и при выставлении центра карты учитывать размер балуна.

clusterer.options.set({

    clusterBalloonAutoPan: false,

    balloonAutoPan: false

});

var newMapCenter = coords; // какие-то новые координаты,

      newGlobalPixelCenter = map.options.get('projection').toGlobalPixels(newMapCenter, map.getZoom());

map.setGlobalPixelCenter([newGlobalPixelCenter[0], newGlobalPixelCenter[1] - 400); // Берем новый центр карты и сдвигаем его вниз на 400 пикселей, чтобы в эти 400 пикселей поместился балун.