Клуб API Карт

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

OlafurTorkildsen
16 декабря 2013, 02:46

Здравствуйте!

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

Сейчас понадобилось добавить кластер, т. к. объекты в куче многие.

И вот кластеры добавил, вроде отображаются, но теперь не отображается ни один балун.

Подозреваю, что это из за того, что шаблон балуна для коллекции меток нужно как-то переопределить на кластер, но как это сделать?

 вот ссылка на страницу: http://holodanet.com/index.php/portfolio

<!-- Подключаем API карт 2.x -->
<script type="text/javascript">
// <![CDATA[
// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);
function init() {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map")
var myMap = new ymaps.Map('map', {
// При инициализации карты, обязательно нужно указать
// ее центр и коэффициент масштабирования
center: [84.955677, 56.47843],
zoom: 10
});
// Для добавления элемента управления на карту
// используется поле map.controls.
// Это поле содержит ссылку на экземпляр класса map.control.Manager.
// Добавление элемента в коллекцию производится
// с помощью метода add.
// В метод add можно передать строковый идентификатор
// элемента управления и его параметры.
myMap.controls
// Кнопка изменения масштаба.
.add('zoomControl', {
left: 5,
top: 5
})
myPlacemarkAprel = new ymaps.Placemark([85.072191, 56.387839], {
name: 'Баня, п. Апрель',
address: '35м2',
websayt: 'www.holodanet.com/index.php/bani/35m2-p-aprel'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkZavarzino = new ymaps.Placemark([85.096697, 56.468414], {
name: 'Баня, Заварзино',
address: '24м2',
websayt: 'www.holodanet.com/index.php/bani/p-zavarzino-banya-24-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkBodazhkovo = new ymaps.Placemark([85.235397, 56.493109], {
name: 'Коттедж, д. Бодажково',
address: '100м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/d-bodazhkovo-100m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkTahtam = new ymaps.Placemark([84.881847, 56.377816], {
name: 'Коттедж, п. Тахтамышево',
address: '200м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-takhtamyshevo-200m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkSosnbor = new ymaps.Placemark([84.984974, 56.54391], {
name: 'Коттедж, п. Сосновый бор',
address: '280м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-sosnovyj-bor-280-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkNauka = new ymaps.Placemark([85.071284, 56.485222], {
name: 'Коттедж, п. Наука',
address: '250м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-nauka-250-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkZonalny = new ymaps.Placemark([85.02564, 56.429175], {
name: 'Коттедж, п. Зональный',
address: '120м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-zonalnyj-120m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkZavarzino2 = new ymaps.Placemark([85.100259, 56.467594], {
name: 'Коттедж, Заварзино',
address: '130м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-zavarzino-130-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkBogashevo = new ymaps.Placemark([85.142493, 56.364187], {
name: 'Коттедж, Богашёво',
address: '105м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-bogashevo-105-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkBogashevo2 = new ymaps.Placemark([85.14524, 56.365616], {
name: 'Коттедж, Богашёво',
address: '100м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-bogashevo-100-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkBogashevo3 = new ymaps.Placemark([85.14627, 56.362043], {
name: 'Коттедж, Богашёво',
address: '80м2',
websayt: 'holodanet.com/index.php/kottedzhi/p-bogashevo-80-m2'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}), myPlacemarkTahtam2 = new ymaps.Placemark([85.096697, 56.468414], {
name: 'Мечеть, п. Тахтамышево',
address: 'не указана',
websayt: 'www.holodanet.com/index.php/kommerc/mechet'
}, {
iconImageSize: [15, 15],
iconImageOffset: [-10, -10]
}),
// Создаем коллекцию, в которую будем добавлять метки
clusterer = new ymaps.Clusterer();
//Добавляем метки в коллекцию геообъектов.
clusterer.add(myPlacemarkAprel).add(myPlacemarkZavarzino).add(myPlacemarkBodazhkovo).add(myPlacemarkTahtam).add(myPlacemarkSosnbor).add(myPlacemarkNauka).add(myPlacemarkZonalny).add(myPlacemarkZavarzino2).add(myPlacemarkBogashevo).add(myPlacemarkBogashevo2).add(myPlacemarkBogashevo3).add(myPlacemarkTahtam2);
// Создаем шаблон для отображения контента балуна
var myBalloonLayout = ymaps.templateLayoutFactory.createClass('<h3>$[properties.name]</h3>' + '<p><strong>Площадь:</strong> $[properties.address]</p>' + '<p><strong>посмотреть в портфолио:</strong> <a rel="nofollow" href="http://$[properties.websayt]" target="_blank">перейти</a></p>');
// Помещаем созданный шаблон в хранилище шаблонов. Теперь наш шаблон доступен по ключу 'my#theaterlayout'.
ymaps.layout.storage.add('my#theaterlayout', myBalloonLayout);
// Задаем наш шаблон для балунов геобъектов коллекции.
// Добавляем коллекцию геообъектов на карту.
myMap.geoObjects.add(clusterer);
}
// ]]>
</script>
<div id="map" style="width: 1100px; height: 450px; align: center;">&nbsp;</div>

 

3 комментария

Можно задать опции так

clusterer.options.set({

    clusterBalloonContentBodyLayout: 'cluster#balloonContentBody',

    balloonContentBodyLayout: 'my#theaterlayout'

});

Тогда кластеры подцепят опцию с префиксом cluster, а все метки подцепят опцию без префикса.

Спасибо за совет, балуны у отдельно стоящих меток стали отображаться, тут я суть понял. А вот кластеры почему-то по разному себя ведут. У меня на карте их два. По щелчке на первом увеличивается масштаб и кластер распадается на метки, а по щелчке на втором появляется ещё один кластер, у которого вылезает пустой балун :(

Как сделать, чтобы по щелчку на любом из кластеров вылезал просто балун со списком меток в нём, и чтобы он пустым не был?

1. Чтобы кластеры не распадались, надо задать опцию

clusterer.options.set({

     clusterDisableClickZoom: true

});

2. Балун пустой, потому что макет балуна подразумевает наличие определенных полей в данных геообъекта. Если вы хотите использовать свои поля, нужно переопределить макеты частей балуна кластера.

Посмотрите примеры в песочнице - http://api.yandex.ru/maps/jsbox/cluster_balloon_layout (и там еще под ним 2 примера с разными балунами кластера)