Клуб API Карт

Проблема с выводом объектов при клике на меню

tech@lancelab.ru
23 мая 2016, 10:50

Доброго времени суток!

Не получается настоить карту.   Проблема: при клике на "Скверы, Дороги или Дворы" не происходит вывод только конкретных объектов(всегда выводятся все). Также и при клике на пункт из синего подменю(В процессе, На гарантии, Архив). Подскажите в чем может быть проблема?

Код:

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

Скрин:

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