Друзья, помогите. Как в примере кластеризировать метки?
И получить обратное событие по нажатию на метку?
var groups = [
{
name: "Заказы от 21.01",
style: "islands#redIcon",
items: [
{
center: [50.426472, 30.563022],
name: "Монумент "Родина-Мать"",
ord: "1017",
dop: "до 12"
},
{
center: [50.45351, 30.516489],
name: "Памятник "Богдану Хмельницкому"",
ord: "1016",
dop: "16-18"
},
{
center: [50.454433, 30.529874],
name: "Арка Дружбы народов",
ord: "1015",
dop: "22"
}
]},
{
name: "ЗАказы от 12 30",
style: "islands#greenIcon",
items: [
{
center: [50.50955, 30.60791],
name: "Ресторан "Калинка-Малинка"",
ord: "1014",
dop: "до 10"
},
{
center: [50.429083, 30.521708],
name: "Бар "Сало-бар"",
ord: "1013",
dop: "до 12"
},
{
center: [50.450843, 30.498271],
name: "Абсент-бар "Палата №6"",
ord: "1012",
dop: "до 14"
},
{
center: [50.454834, 30.516498],
name: "Ресторан "Спотыкач"",
ord: "1011",
dop: "до 18"
}
]},
/*{
name: "Оригинальные музейчики",
style: "islands#orangeIcon",
items: [
{
center: [50.443334, 30.520163],
name: "Музей грамзаписи и старинных музыкальных инструментов"
},
{
center: [50.446977, 30.505269],
name: "Музей истории медицины или Анатомический театр"
},
{
center: [50.452512, 30.530889],
name: "Музей воды. Водно-информационный центр"
}
]},
{
name: "Красивости",
style: "islands#blueIcon",
items: [
{
center: [50.45987, 30.516174],
name: "Замок Ричарда-Львиное сердце"
},
{
center: [50.445049, 30.528598],
name: ""Дом с химерами""
},
{
center: [50.449156, 30.511809],
name: "Дом Рыцаря"
}
]}*/
];
ymaps.ready(init);
function init() {
// Создание экземпляра карты.
var myMap = new ymaps.Map('map', {
center: [50.443705, 30.530946],
zoom: 12
}, {
searchControlProvider: 'yandex#search'
});
// Контейнер для меню.
menu = $('
for(var i = 0, l = groups.length; i < l; i++){createMenuGroup(groups[i]);}
function createMenuGroup (group)
{
// Пункт меню.
//var menuItem = $(''),
var menuItem = $('
// Коллекция для геообъектов группы.
collection = new ymaps.GeoObjectCollection(null, { preset: group.style }),
// Контейнер для подменю.
submenu = $('
// Добавляем коллекцию на карту.
myMap.geoObjects.add(collection);
// Добавляем подменю.
menuItem
.append(submenu)
// Добавляем пункт в меню.
.appendTo(menu)
// По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
.find('a')
.toggle(function () {
myMap.geoObjects.remove(collection);
submenu.hide();
}, function () {
myMap.geoObjects.add(collection);
submenu.show();
});
for (var j = 0, m = group.items.length; j < m; j++)
{
createSubMenu(group.items[j], collection, submenu);
}
}
function createSubMenu (item, collection, submenu) {
// Пункт подменю.
var submenuItem = $(''),
// Создаем метку.
placemark = new ymaps.Placemark(item.center, { iconContent: item.dop, balloonContent: item.ord}, { preset: 'islands#redStretchyIcon' });
// Добавляем метку в коллекцию.
collection.add(placemark);
// Добавляем пункт в подменю.
submenuItem
.appendTo(submenu)
// При клике по пункту подменю открываем/закрываем баллун у метки.
.find('a')
.toggle(function () {
placemark.balloon.open();
}, function () {
placemark.balloon.close();
});
}
// Добавляем меню в тэг BODY.
// menu.appendTo($('body'));
$("#orders").html(menu);
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds(), {
checkZoomRange: true
});
}
Друзья, как в примере кластеризировать метки?