Клуб API Карт

Список меток в балуне кластера

art028
22 мая 2012, 23:29

Случай следующий:

создаю карту с кластерами, так уже получилось, что в нескольких домах по нескольку разных меток,

поэтому при нажатии на кластер открывается балун, в нём слева должен быть видимо список (там пустая серая полоска тонкая),

справа содержимое балуна метки. Чисто случайно нажал на серую полоску слева (видимо там список должен быть) содержимое сменилось.

Как сделать список меток кластера слева полноценным (с названиями меток)?

12 комментариев
Подписаться на комментарии к посту

Балун кластеризатора пытается отобразить поле данных геообъекта (метки), а именно clusterCaption.

Посмотрите, как это поле задается в примере из документации.

 

а как clusterCaption работает в ymaps.Placemark?

или его можно только в ymaps.GeoObject использовать?

тогда как будет выглядеть создание меток с балунами? 

var placemark = new ymaps.Placemark([37, 56], {clusterCaption: 'Ваши данные'});

Второй параметр в конструкторе placemark - это как раз данные.

Благодарю! 

а можно как-то ajax менять по клику на clusterCaption контент? а то грузить контент для 500 меток, допустим, сложно.

Вы можете переопределить макет балуна кластера и перестраивать его, как только данные погрузятся.

Вот простой пример переопределения макета балуна кластера.

var BalloonLayout = ym.templateLayoutFactory.createClass("", {

         build: function () {

             var parent = this.getParentElement(),

                  content = "",

                  geoObjects = this.getData().properties.get('geoObjects');

            for (var i = 0, l = geoObjects.length; i < l; i++) {

                 content += geoObjects[i].properties.get('clusterCaption') + "
";

            }

            parent.innerHTML = content;

    };

clusterer.options.set('clusterBallonContentBodyLayout', BalloonLayout);

 

этот код не работает. есть живой пример?

У меня работает)

могли бы вы сделать страничку с таким кодом? у меня никакой реакции нет...

Сделала отдельную страничку, вот вам код.

ymaps.ready(function () { 

    var map = new ymaps.Map('mapsID', {center: [56.034, 36.992], zoom: 8});

 

    var BalloonLayout = ymaps.templateLayoutFactory.createClass("", {

            build: function () {

                var parent = this.getParentElement(),

                    content = "",

                    geoObjects = this.getData().properties.get('geoObjects');

                for (var i = 0, l = geoObjects.length; i < l; i++) {

                    content += geoObjects[i].properties.get('clusterCaption') + "
";

                }

                parent.innerHTML = content;

            }

        });

    clusterer = new ymaps.Clusterer({clusterBalloonContentBodyLayout: BalloonLayout});

    clusterer.add([

        new ymaps.Placemark([56.034, 36.992], {clusterCaption: 'метка1'}),

        new ymaps.Placemark([56.034, 36.992], {clusterCaption: 'метка2'})

    ]);

    map.geoObjects.add(clusterer);

});

вы проверяли?

http://real.kelnik.ru/1.html

видно алерт? на хроме нет, по крайней мере.

Я тестировала пример не на той версии апи, на которой он работает у вас - отсюда и разница в результате.

Сейчас в кластеризаторе есть баг, связанный с "просачиванием" опций кластера через кластеризатор.

Вот ваш подкорректированный код, который должен сработать.

var BalloonLayout = ymaps.templateLayoutFactory.createClass("", {

 

            build: function () {

alert('TEST');

                var parent = this.getParentElement(),

 

                    content = "",

 

                    geoObjects = this.getData().properties.get('geoObjects');

 

                for (var i = 0, l = geoObjects.length; i < l; i++) {

 

                    content += geoObjects[i].properties.get('clusterCaption') + "*****
";

 

                }

 

                parent.innerHTML = content;

 

            }

 

        });

 

    clusterer = new ymaps.Clusterer();

    clusterer.createCluster = function(center, geoObjects) {

        var cluster = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects);

        cluster.options.set({balloonContentBodyLayout: BalloonLayout});

        return cluster;

    };

    

    clusterer.add([

 

        new ymaps.Placemark([56.034, 36.992], {clusterCaption: 'метка1'}),

 

        new ymaps.Placemark([56.034, 36.992], {clusterCaption: 'метка2'})

 

    ]);

 

    map.geoObjects.add(clusterer);

 

Баг с опциями уже исправлен, как только выйдет свежая версия (это вроде бы ожидается в ближайшие недели), не нужно будет переопределять функцию createCluster.