Клуб API Карт

Кластеризация меток, нанесённых вручную

OlafurTorkildsen
10 декабря 2013, 04:18

в общем, есть карта, есть метки на ней. Для меток сделал шаблон, наносил их вручную.

Встала задача объединить близкостоящие метки в кластеры, вопрос - куда добавить вот это

clusterer = new ymaps.Clusterer();
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);

, чтобы всё получилось? :)

Посмотрел в примерах - а там все они для добавления массива, или скриптом генерируются - ничо не понял :)

Сам разбирался-разбирался, карта выводится, метки и кластеры - нет :)

Хелпаните, пожалуйста

  

<!-- Подключаем 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: 11
});
myPlacemarkAprel = new ymaps.Placemark([85.072191, 56.387839], {
name: 'Баня, п. Апрель',
address: '35м2',
websayt: 'www.holodanet.com/index.php/bani/35m2-p-aprel'
}), myPlacemarkZavarzino = new ymaps.Placemark([85.096697, 56.468414], {
name: 'Баня, Заварзино',
address: '24м2',
websayt: 'www.holodanet.com/index.php/bani/p-zavarzino-banya-24-m2'
}), myPlacemarkBodazhkovo = new ymaps.Placemark([85.235397, 56.493109], {
name: 'Коттедж, д. Бодажково',
address: '100м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/d-bodazhkovo-100m2'
}), myPlacemarkTahtam = new ymaps.Placemark([84.881847, 56.377816], {
name: 'Коттедж, п. Тахтамышево',
address: '200м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-takhtamyshevo-200m2'
}), myPlacemarkSosnbor = new ymaps.Placemark([84.984974, 56.54391], {
name: 'Коттедж, п. Сосновый бор',
address: '280м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-sosnovyj-bor-280-m2'
}), myPlacemarkNauka = new ymaps.Placemark([85.071284, 56.485222], {
name: 'Коттедж, п. Наука',
address: '250м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-nauka-250-m2'
}), myPlacemarkZonalny = new ymaps.Placemark([85.02564, 56.429175], {
name: 'Коттедж, п. Зональный',
address: '120м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-zonalnyj-120m2'
}), myPlacemarkZavarzino2 = new ymaps.Placemark([85.100259, 56.467594], {
name: 'Коттедж, Заварзино',
address: '130м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-zavarzino-130-m2'
}), myPlacemarkBogashevo = new ymaps.Placemark([85.142493, 56.364187], {
name: 'Коттедж, Богашёво',
address: '105м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-bogashevo-105-m2'
}), myPlacemarkBogashevo2 = new ymaps.Placemark([85.14524, 56.365616], {
name: 'Коттедж, Богашёво',
address: '100м2',
websayt: 'www.holodanet.com/index.php/kottedzhi/p-bogashevo-100-m2'
}), myPlacemarkBogashevo3 = new ymaps.Placemark([85.14627, 56.362043], {
name: 'Коттедж, Богашёво',
address: '80м2',
websayt: 'holodanet.com/index.php/kottedzhi/p-bogashevo-80-m2'
}), myPlacemarkTahtam2 = new ymaps.Placemark([85.096697, 56.468414], {
name: 'Мечеть, п. Тахтамышево',
address: 'не указана',
websayt: 'www.holodanet.com/index.php/kommerc/mechet'
}),
// Создаем коллекцию, в которую будем добавлять метки
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);
// Задаем наш шаблон для балунов геобъектов коллекции.
myCollection.options.set({
balloonContentBodyLayout: 'my#theaterlayout',
// Максимальная ширина балуна в пикселах
balloonMaxWidth: 300
});
// Добавляем коллекцию геообъектов на карту.
myMap.geoObjects.add(clusterer);
}
// ]]>
</script>
<div id="map" style="width: 1100px; height: 450px; align: center;">&nbsp;</div>

 

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

Дайте ссылку на этот код

http://holodanet.com/index.php/portfolio

вот, только я убрал вот это сейчас

clusterer = new ymaps.Clusterer();
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);

создай portfolio_test с кластерами

и посмотрим

http://holodanet.com/index.php/portfolio

на эту же страницу код запилил.

Надо убрать этот код, т.к. переменной myCollection больше нет, а ты к ней обращаешься

myCollection.options.set({

balloonContentBodyLayout: 'my#theaterlayout',

// Максимальная ширина балуна в пикселах

balloonMaxWidth: 300

});

блин, точно, спасибо огромное!

а теперь ширину балуна можно присвоить не коллекции, а кластеру?

можно

выставить кластеризатору опцию clusterBalloonWidth