API Яндекс.Карт. Модули: Редактор маршрута

Модуль предоставляет возможность использования визуального редактора маршрутов. Редактор реализован в виде элемента управления, который позволяет задавать начальную и конечную точки, точки остановки и промежуточные точки маршрута в визуальном режиме. Маршрут между заданными точками прокладывается автоматически.

Перед использованием модуля его необходимо подключить.

После загрузки модуля становится доступным пространство имен YMaps.RouterEditor и соответствующие классы.

Размещение редактора маршрута на карте

Редактор маршрута реализован в виде двух классов: YMaps.RouterEditor.DragAndDropEditor и YMaps.RouterEditor.RouterModel. Первый отвечает за визуальный интерфейс редактора. Второй предназначен для хранения результатов обращения к маршрутизатору. Чтобы использовать редактор маршрутов, необходимо создать экземпляры обоих указанных классов.

Класс YMaps.RouterEditor.DragAndDropEditor расширяет класс YMaps.IControl и размещается на карте так же, как и любой другой элемент управления:

// Создание экземпляров модели и редактора.
var routerModel = new YMaps.RouterEditor.RouterModel()
var editor = new YMaps.RouterEditor.DragAndDropEditor(routerModel);
// Размещение редактора на карте.
map.addControl(editor);
// Включение режима добавления точек маршрута кликом по карте.
editor.startDrawing();

Открыть пример в новом окне

С редактором связана соответствующая модель — экземпляр YMaps.RouterEditor.RouterModel — отвечающая за хранение данных о маршруте.

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

var map = new YMaps.Map( document.getElementById("YMapsID") );
// Установка центра, масштаба и типа карты.
map.setCenter(new YMaps.GeoPoint(37.60, 55.76), 13,    YMaps.MapType.MAP);
// Создание экземпляров модели и редактора.
var routerModel = new YMaps.RouterEditor.RouterModel();
var    editor = new YMaps.RouterEditor.DragAndDropEditor(routerModel, {
            viaPointHintContent: 'Перетащите точку или удалите ёё двойным щелчком',
            cursorHintContent: 'Перетащите метку, чтобы создать промежуточную точку',
            maxPoints: 3
        }
    );
// Построение маршрута от ст. метро Белорусская до ст. метро Лубянка
// через промежуточную точку (37.602777, 55.745144).
routerModel.getRouteProvider().route({
        wayPoints: ['Белорусская', new YMaps.GeoPoint(37.602777, 55.745144), 'Лубянка'],
        viaPoints: [1],
        options: { boundedBy: map.getBounds() } // область для геокодирования
    },
    function (rr) {
        // Передача полученного результат в модель.
        // Модель оповестит о новом маршруте редактор.
        routerModel.setRouterResult(rr);
    }
);
// Размещение редактора на карте.
map.addControl(editor);

Открыть пример в новом окне

Cтраница http://api.yandex.ru/maps/jsapi/examples/router_editor_nav.html содержит пример построения маршрута из пункта отправления в различные пункты прибытия, выбираемые из списка.

Получение информации о проложенном маршруте

Для получения информации о построенном в редакторе маршруте необходимо обратиться к методу getRouterResult() модели, связанной с редактором. Модель возвратит результат работы маршрутизатора в виде экземпляра класса YMaps.RouterEditor.RouterResult. Ответ маршрутизатора содержится в поле response в виде объекта JSON.

Для упрощения обработки ответа маршрутизатора предназначен класс YMaps.RouterEditor.RouterResultHelper.

routerModel.getRouteProvider().route({
        wayPoints: ['Белорусская', new YMaps.GeoPoint(37.604682, 55.752516), 'Лубянка'],
        viaPoints: [1],
    },
    function (rr) {
        // Передача полученного результат в модель.
        // Модель оповестит о новом маршруте редактор.
        routerModel.setRouterResult(rr);
        // Вспомогательный класс для обработки ответа маршрутизатора.
        helper = new YMaps.RouterEditor.RouterResultHelper(rr);
        // Вывод протяженности построенного маршрута.
        YMaps.jQuery('body').append( 'Протяженность маршрута ~ '
            + YMaps.humanDistance(helper.getDistance()) );
    }
);

Открыть пример в новом окне

API Карт:

JavaScript API 1.x

Редактор маршрута

Размещение редактора маршрута на карте

Получение информации о проложенном маршруте