Клуб API Карт

Как отображать только выбранный маршрут?

Пост в архиве.

Имеется список маршрутов с меню.

1. Как сделать так, чтобы отображался только выбранный маршрут?

2. Как по-умолчанию отобразить первый в списке маршрут?

 

 

/* изменение высоты карты */

var myMap,
    mapData = [];

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

mapData = [
        {
            name: 'Из Калуги',
            path: [[36.237041,54.533832],[36.430997,54.996898]]
        },
        {
            name: 'Из Москвы',
            path: [[37.617761,55.755773],[36.430997,54.996898]]
        }
]


function init () {
    myMap = new ymaps.Map('YaMaps_path', {
        center:[36.430997,54.996898], // Малоярославец
        zoom:8,
        behaviors: ['default', 'scrollZoom']
    });
   
    var menu = $('<ul class="ul_li"/>');
   
    for(var i = 0, len = mapData.length; i < len; i++) {
        (function (mapData) {
            var menuItem = $('<li><a href="#' + mapData.name + '" class="dashed_link"><span>' + mapData.name + '</span></a></li>'),
                route;
            // Создаем DOM-элемент меню для каждого маршрута
            menuItem.appendTo(menu).find('a').bind('click', function () {
                var link = $(this).parent();
               
                if (link.hasClass("active")) {
                    route && myMap.geoObjects.remove(route);
                } else {
                    if(route) {
                        myMap.geoObjects.add(route);
                    } else {
                        ymaps.route(mapData.path, {                                                                                                                                               
                            mapStateAutoApply: true
                        }).then(function (result) {
                            myMap.geoObjects.add(route = result);
                        });
                    }                      
                }
                link.addClass("active").siblings().removeClass('active');
                return false;
            })

        }(mapData[i]));
    }
   
    menu.appendTo('.path_nav');

}

 

По клику на ссылке отображается соответствующий ей маршрут. По клику на следующий, предыдущий не пропадает, а следующий просто добавляется на карту наряду с предыдущим. Пробовал разные варианты, но то ли не в ту сторону копаю, то ли хз. То же касается и отображения первого в списке маршрута после загрузки карты. Тупик какой то.

 ссылка

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

Проблема тут конечно не в АПИ, а в той архитектуре, которую ты использовал.

Если бы ты применил ООП + MVC,

хранил бы в одном инстансе класса ссылки на MapView (отображение маршрута на карте) и DOMVew (отображение маршрута в DOM-дереве ввиде пункта меню)

То управлять всем этим и усложнять логику было бы проще.


Но поскольку ты использовал процедурный подход, то имеешь теперь клубок вложенных функций которые и обработчики навешивают и DOM строят и маршруты создают и картошку чистят)

 

Соответственно ты можешь выбрать 2 пути:

1. переписать это все правильно на ООП + MVC

2. добавить несколько строчек jQuery-костыликов в свой клубок, чтобы оно работало как ты хочешь

 

тебе с каким вариантом помочь?

 

Естественно, вариант с правильной архитектурой. Видимо не в последний раз сталкиваюсь с этими картами. Хотелось бы вникнуть

 

Пример 

Код на гитхабе 

 

Документацию я пока не писал, если будут вопросы - спрашивай.

Большое тебе человеческое спасибо за помощь. По сути за меня решил мою задачу. Заодно дал пинка поднять зад и покурить мануалы на тему MVC в js. Для меня оно вещь сама по себе новая. Еще не пробовал выстранивать данную архитектуру в клиентском приложении. С этими картами пытался отыскать решение "в три строчки", но по сути потерял всякий контроль логики приложения.