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

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

art028

22 мая 2012, 23:29

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

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

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

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

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

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

Авторизуйтесь, чтобы оставить комментарий

mari-na-bzzz

28 января 2016, 04:39

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

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

art028

28 января 2016, 04:39

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

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

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

mari-na-bzzz

28 января 2016, 04:39

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

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

art028

28 января 2016, 04:39

Благодарю!

ifourspb

28 января 2016, 04:39

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

mari-na-bzzz

28 января 2016, 04:39

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

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

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);

ifourspb

28 января 2016, 04:39

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

mari-na-bzzz

28 января 2016, 04:39

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

ifourspb

28 января 2016, 04:39

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

mari-na-bzzz

28 января 2016, 04:39

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

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);

});

ifourspb

28 января 2016, 04:39

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

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

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

mari-na-bzzz

28 января 2016, 04:39

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

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

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

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.