Построение автомобильного мультимаршрута

Open in CodeSandbox

Мультимаршрутизатор позволяет по заданным точкам строить сразу несколько маршрутов.

Для создания мультимаршрута используется класс multiRouter.MultiRoute. В качестве его параметров передаются следующие объекты:

  • модель мультимаршрута. Задается в качестве объекта с полями:
    • referencePoints - массив опорных точек маршрута. Обратите внимание, что если задано больше двух опорных точек, то маршрутизатор возвращает только один маршрут.
    • params - параметры маршрутизации (например, тип маршрутизации, учет пробок и др.).
  • опции маршрутизатора. В опциях задаются правила отображения маршрутов на карте.

Все опорные точки маршрута делятся на путевые (wayPoint) и транзитные (viaPoint). Путевые точки - это точки, в которых необходимо сделать остановку, а транзитные - через которые нужно проложить маршрут без остановки.

После того как все маршруты были построены, самый короткий из них автоматически становится активным. Такой маршрут отображается на карте фиолетовым цветом. Серые пунктирные линии обозначают пересадки с одного вида транспорта на другой или переход между станциями (для маршрута на общественном транспорте).
Неактивные маршруты отображаются серым цветом. Для переключения активного маршрута достаточно кликнуть правой кнопкой мыши по нужному маршруту. Также переключить активный маршрут можно программно. См. multiRouter.MultiRouteModel#methods-summary. 

<!DOCTYPE html>
<html>
    <head>
        <title>Построение автомобильного мультимаршрута</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="multiroute_driving.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

function init() {
    /**
     * Создаем мультимаршрут.
     * Первым аргументом передаем модель либо объект описания модели.
     * Вторым аргументом передаем опции отображения мультимаршрута.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml
     */
    var multiRoute = new ymaps.multiRouter.MultiRoute(
        {
            // Описание опорных точек мультимаршрута.
            referencePoints: [
                [55.734876, 37.59308],
                "Москва, ул. Мясницкая",
            ],
            // Параметры маршрутизации.
            params: {
                // Ограничение на максимальное количество маршрутов, возвращаемое маршрутизатором.
                results: 2,
            },
        },
        {
            // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
            boundsAutoApply: true,
        }
    );

    // Создаем кнопки для управления мультимаршрутом.
    var trafficButton = new ymaps.control.Button({
            data: { content: "Учитывать пробки" },
            options: { selectOnClick: true },
        }),
        viaPointButton = new ymaps.control.Button({
            data: { content: "Добавить транзитную точку" },
            options: { selectOnClick: true },
        });

    // Объявляем обработчики для кнопок.
    trafficButton.events.add("select", function () {
        /**
         * Задаем параметры маршрутизации для модели мультимаршрута.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setParams
         */
        multiRoute.model.setParams({ avoidTrafficJams: true }, true);
    });

    trafficButton.events.add("deselect", function () {
        multiRoute.model.setParams({ avoidTrafficJams: false }, true);
    });

    viaPointButton.events.add("select", function () {
        var referencePoints = multiRoute.model.getReferencePoints();
        referencePoints.splice(1, 0, "Москва, ул. Солянка, 7");
        /**
         * Добавляем транзитную точку в модель мультимаршрута.
         * Обратите внимание, что транзитные точки могут находится только
         * между двумя путевыми точками, т.е. не могут быть крайними точками маршрута.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setReferencePoints
         */
        multiRoute.model.setReferencePoints(referencePoints, [1]);
    });

    viaPointButton.events.add("deselect", function () {
        var referencePoints = multiRoute.model.getReferencePoints();
        referencePoints.splice(1, 1);
        multiRoute.model.setReferencePoints(referencePoints, []);
    });

    // Создаем карту с добавленными на нее кнопками.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.750625, 37.626],
            zoom: 7,
            controls: [trafficButton, viaPointButton],
        },
        {
            buttonMaxWidth: 300,
        }
    );

    // Добавляем мультимаршрут на карту.
    myMap.geoObjects.add(multiRoute);
}

ymaps.ready(init);