Клуб API Карт

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

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

Добрый день.

Уважаемые гуру api yandex карт, подскажите пожалуйста, начинающему как сделать маршрут в меню, как на примере http://api.yandex.ru/maps/doc/jsapi/1.x/examples/mapgroupmenu.html

чтобы он мог скрываться и отображаться при нажатии на него в меню.

В идеале должно в одном меню присутствовать вкл/выкл группы меток, что уже реализовано в примере и отображение маршрутов с возможностью вкл./выкл. в меню.

Пожалуйста, покажите кодом и ссылкой на нужный мануал.

Сейчас маршрут прокладываю так:

var router2 = new YMaps.Router([

            'Россия, Ярославская область, Ярославль, Ленина, 4',

            'Россия, Ярославская область, Ярославль, Ленина, 14',

            'Россия, Ярославская область, Ярославль, Ленина, 18',

            'Россия, Ярославская область, Ярославль, Ленина, 49'

            ],

            [1,2,3]

            ,{viewAutoApply: true, avoidTrafficJams: traffic.isShown() });

 

 

YMaps.Events.observe(router2, router2.Events.RouteError, function (link, number) {

               alert('Не удается проложить маршрут до точки № ' + number+1);

            });

            YMaps.Events.observe(router2, router2.Events.Success, function() {

                map.addOverlay(router2);

               //выводим данные по времени и пробегу

               router2.getWayPoint(0).setIconContent('ПонедельникМАШИНА 1');

               router2.getWayPoint(router2.getNumWayPoints()-1).setIconContent(YMaps.humanDuration(router2.getDuration(0))+"  "+YMaps.humanDistance(router2.getDistance(0)));

            });

 

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

что именно у Вас не получается?

тем кодом который написан выше я строю маршрут на карте, но когда таких маршрутов допустим 20, то уже не понятно где, что и куда смотреть.

Для удобство было бы хорошо иметь возможность включать и выключать маршрут на карте в онлайне. Мне понравился пример отображения группы меток как в примере http://api.yandex.ru/maps/doc/jsapi/1.x/examples/mapgroupmenu.html

Хочу так же но что бы скрывать и отображать маршруты.

Что вы хотите сделать я понял.

Что конкретно не получается из приведенного вами описания?

Я делал недавно вариант этого же примера с чекбоксами, там похожая задача (включать/выключать) решена, может он Вам пригодится

спасибо за пример.

я так понимаю это для 2.0?

да 2-е АПИ

поизучал ваш пример, не совсем понятен для меня.

не поможете с кодомо по маршруту?

что не понятно, спрашивайте, помогу

у вас есть функция createPlacemark передавая в которую параметры мы создаем метку.

как я понимаю мне нужно создать функцию в которую будет передаваться 1 параметр?

как то вот так?

        function createRouter(name) {

            var router2 = new YMaps.Router(['name'], [1,2,3] ,{viewAutoApply: true, avoidTrafficJams: traffic.isShown() });

            return router2

        }

 

а формировать группу

// Группы объектов
 var groups = [
 createGroup("Понедельник", [
 createRouter(['Россия, Ярославская область, Ярославль, Ленина, 4',
 'Россия, Ярославская область, Ярославль, Ленина, 14',
 'Россия, Ярославская область, Ярославль, Ленина, 18',
 'Россия, Ярославская область, Ярославль, Ленина, 49'])
 ])
 ];

Можно обойтись и без этих функций

Вам нужно оформить ваши данные (группы маршрутных точек) ввиде javascript-массива), перебирая элементы которого, создавать ссылки и вешать на них обработчики клика, которые будут вызывать построение/скрытие маршрута на карте

можете в виде кода показать ка кэто сделать?

Вообще я плохо помню АПИ 1.х

вам 2.0 не подойдет?

ну и этот пункт

 

Вам нужно оформить ваши данные (группы маршрутных точек) ввиде javascript-массива)

вам нужно сделать самому

Я думаю, и 2.0 подойдет.

Данные я как-нибудь оформлю в виде массива.

просто на примере покажите как это реализовать в самой простой форме.

примерно так

 

var data = [     { "name": "Маршрут 1", "wayPoints": [        "Россия, Ярослаская область, Ярославль, Ленина 1",        "Россия, Ярослаская область, Ярославль, Ленина 2",        "Россия, Ярослаская область, Ярославль, Ленина 3",        "Россия, Ярослаская область, Ярославль, Ленина 4"    ]},     ... };// Контейнер для меню маршрутовvar menu = $('
    ');
for(var i = 0, len = data.length; i < len; i++) {    (function (data) {        var item = $('
  • '),
  •             route;        // Создаем DOM-элемент меню для каждого маршрута        $('' + data.name + '').toggle(function () {            if(route) {                myMap.geoObjects.add(route);            }               else {                ymaps.route(data.wayPoints, {                    avoidTrafficJams: true,                                                                                                                                                                                                                mapStateAutoApply: true                }).then(function (result) {                    myMap.geoObjects.add(route = result);                });             }           }, function () {            route && myMap.geoObjects.remove(route);        }).appendTo(item);        item.appendTo(menu);    }(data[i]));}menu.appendTo('body');

    Извиняюсь, за бестактность. куда это вставлять в коде?

    Извиняюсь, за бестактность. куда это вставлять в коде?

    можете взять самый простой пример

    и вставить этот код после кода создания карты

     

    var myMap = new ymaps.Map('map', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [55.76, 37.64], // Москва
    zoom: 10
    });сюда

     Вам нужно еще подключить jquery

     

    Вольшое Вам человеское спасибо.

    Все замечательно работает.

    Подскажите, пожалуйста, в этом примере http://api.yandex.ru/maps/doc/jsapi/2.x/examples/ymapsml/menufromymapsml.html

    как вставить ваш код что бы он сработал?

    а что не работает?

    Все замечательно работает, сказалось отсутсвие опыта у меня.

    Поделитесь опытом, не знаю нарушаю я правила форума или нет, когда построено много меток на карте и проложено много маршрутов, особенно по одной улице, становится не понятным куда ехать, как  втакой ситуцаии лучше поступить? Может выделять цветом каждый из участкой от одной точки до другой, или есть более изящные решения?

    вам нужно придумать правильное интерфейсное решение

    показывать все и сразу не нужно