Доброго времени суток!
Не получается настоить карту. Проблема: при клике на "Скверы, Дороги или Дворы" не происходит вывод только конкретных объектов(всегда выводятся все). Также и при клике на пункт из синего подменю(В процессе, На гарантии, Архив). Подскажите в чем может быть проблема?
Код:
<div id="map" style="width: 1010px; height: 600px"></div> <script type="text/javascript"> // Группы объектов var groups = [ { name: "Дороги", works: [ { name: "В процессе", style: "islands#greenCircleDotIcon", items: [ { center: [46.95791177, 142.73060087], name: "В процессе 1" }, { center: [46.95782187, 142.73050087], name: "В процессе 2" }, { center: [46.95773197, 142.73040087], name: "В процессе 3" } ] }, { name: "На гарантии", style: "islands#orangeCircleDotIcon", items: [ { center: [46.95701177, 142.73050087], name: "На гарантии 1" }, { center: [46.95712187, 142.73070087], name: "На гарантии 2" }, { center: [46.95723197, 142.73090087], name: "На гарантии 3" } ] }, { name: "Архив", style: "islands#redCircleDotIcon", items: [ { center: [46.95691177, 142.73160087], name: "Архив 1" }, { center: [46.95682187, 142.73150087], name: "Архив 2" }, { center: [46.95673197, 142.73140087], name: "Архив 3" } ] } ]}, { name: "Дворы", works: [ { name: "В процессе", style: "islands#greenCircleDotIcon", items: [ { center: [46.95691177, 142.73160087], name: "В процессе 1" }, { center: [46.95682187, 142.73150087], name: "В процессе 2" }, { center: [46.95673197, 142.73140087], name: "В процессе 3" } ] }, { name: "На гарантии", style: "islands#orangeCircleDotIcon", items: [ { center: [46.95601177, 142.73150087], name: "На гарантии 1" }, { center: [46.95612187, 142.73170087], name: "На гарантии 2" }, { center: [46.95623197, 142.73190087], name: "На гарантии 3" } ] }, { name: "Архив", style: "islands#redCircleDotIcon", items: [ { center: [46.95791177, 142.73260087], name: "Архив 1" }, { center: [46.95782187, 142.73250087], name: "Архив 2" }, { center: [46.95773197, 142.73240087], name: "Архив 3" } ] } ]}, { name: "Скверы", works: [ { name: "В процессе", style: "islands#greenCircleDotIcon", items: [ { center: [46.95699177, 142.73161087], name: "В процессе 1" }, { center: [46.95688187, 142.73152087], name: "В процессе 2" }, { center: [46.95677197, 142.73143087], name: "В процессе 3" } ] }, { name: "На гарантии", style: "islands#orangeCircleDotIcon", items: [ { center: [46.95641177, 142.73154087], name: "На гарантии 1" }, { center: [46.95652187, 142.73173087], name: "На гарантии 2" }, { center: [46.95663197, 142.73192087], name: "На гарантии 3" } ] }, { name: "Архив", style: "islands#redCircleDotIcon", items: [ { center: [46.95797177, 142.73264087], name: "Архив 1" }, { center: [46.95787187, 142.73254087], name: "Архив 2" }, { center: [46.95776197, 142.73244087], name: "Архив 3" } ] } ]} ]; ymaps.ready(init); function init() { // Создание экземпляра карты. var myMap = new ymaps.Map('map', { center: [46.95, 142.74], zoom: 14 }, { searchControlProvider: 'yandex#search' }), // Контейнер для меню. menu = $('<ul class="menu"></ul>'); for (var i = 0, l = groups.length; i < l; i++) { createMenuGroup(groups[i]); } function createMenuGroup (groups) { // Пункт меню. var menuItem = $('<li><a href="#">' + groups.name + '</a></li>'), // Коллекция для геообъектов группы. collection = new ymaps.GeoObjectCollection(null, { preset: groups.name }), // Контейнер для подменю. submenu = $('<ul class="submenu"></ul>'); // Добавляем коллекцию на карту. myMap.geoObjects.add(collection); // Добавляем подменю. menuItem .append(submenu) // Добавляем пункт в меню. .appendTo(menu) // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю. .find('a') .toggle(function () { myMap.geoObjects.remove(collection); }, function () { myMap.geoObjects.add(collection); }); for (var j = 0, m = groups.works.length; j < m; j++) { createSubMenu(groups.works[j], collection, submenu); } } function createSubMenu (works, collection, submenu) { // Пункт подменю. var submenuItem = $('<li><a href="#">' + works.name + '</a></li>'), // Создаем метку. subcollection = new ymaps.GeoObjectCollection(null, { preset: works.style }); // Добавляем метку в коллекцию. collection.add(subcollection); // Добавляем пункт в подменю. submenuItem .appendTo(submenu) // При клике по пункту подменю открываем/закрываем баллун у метки. .find('a') .toggle(function () { collection.remove(subcollection); }, function () { collection.add(subcollection); }); for (var q = 0, w = works.items.length; q < w; q++) { //createSubSubMenu(works.items[q], collection, submenu); createSubSubMenu(works.items[q], subcollection); } } function createSubSubMenu (items, subcollection) { // Пункт подменю. var // Создаем метку. placemark = new ymaps.Placemark(items.center, { balloonContent: items.name }); // Добавляем метку в коллекцию. subcollection.add(placemark); } // Добавляем меню в тэг BODY. menu.appendTo($('body .menu_nk')); // Выставляем масштаб карты чтобы были видны все группы. myMap.setBounds(myMap.geoObjects.getBounds()); } </script> <script> $(document).load(function(){ $('.menu_nk > ul.menu > li:nth-child(1) > ul.submenu').addClass('active'); }); $(document).ready(function(){ //карта $(".menu_nk").on("click", "li", function() { $('.menu_nk > ul.menu > li > ul.submenu').removeClass('active'); $(this).children('ul.submenu').addClass('active'); //var collection = new ymaps.GeoObjectCollection(null, { preset: 'Дороги' }); //myMap.geoObjects.remove(collection); }); $('#submenutext').click(function(){ $("ul.submenu.active").slideToggle('fast'); }); $("ul.submenu").on("click", "li", function() { var tx = $(this).html(); console.log(tx); $("ul.submenu.active").slideUp('fast'); $("#submenutext").text(tx); }); }); </script>
Скрин: