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

Open in CodeSandbox

Ссылка на редактор маршрута находится в поле editor экземпляра класса router.Route, который будет передан в качестве параметра объекту util.Promise после того, как выполнится построение маршрута.

Включать (выключать) редактор можно только внутри функции-обработчика, которая выполнится, когда от сервера придет результат. 

<!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="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="router_editor.js" type="text/javascript"></script>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }

            #map {
                width: 100%;
                height: 90%;
            }

            #editor {
                padding: 4px;
                margin-top: 10px;
                margin-left: 10px;
                font-size: 14px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <button value="Включить редактор маршрута" id="editor" name="start">
            Включить редактор маршрута
        </button>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [57.131311, 34.576128],
                zoom: 5,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        // Признак начала редактирования маршрута.
        startEditing = false,
        button = $("#editor");

    // Построение маршрута от станции метро Смоленская до станции Третьяковская.
    // Маршрут должен проходить через метро "Арбатская".
    ymaps
        .route(
            [
                "Москва, метро Смоленская",
                {
                    // Метро Арбатская - транзитная точка (проезжать через эту точку,
                    // но не останавливаться в ней).
                    type: "viaPoint",
                    point: "Москва, метро Арбатская",
                },
                // Метро "Третьяковская".
                [55.744568, 37.60118],
            ],
            {
                // Автоматически позиционировать карту.
                mapStateAutoApply: true,
            }
        )
        .then(
            function (route) {
                myMap.geoObjects.add(route);
                button.click(function () {
                    if ((startEditing = !startEditing)) {
                        // Включаем редактор.
                        route.editor.start({
                            addWayPoints: true,
                            removeWayPoints: true,
                        });
                        button.text("Отключить редактор маршрута");
                    } else {
                        // Выключаем редактор.
                        route.editor.stop();
                        button.text("Включить редактор маршрута");
                    }
                });
                route.editor.events.add(
                    ["waypointadd", "waypointremove", "start"],
                    function () {
                        if (route.getWayPoints().getLength() >= 10) {
                            // Если на карте больше 9 точек маршрута, отключаем добавление новых точек.
                            route.editor.start({
                                addWayPoints: false,
                                removeWayPoints: true,
                            });
                        } else {
                            // Включаем добавление новых точек.
                            route.editor.start({
                                addWayPoints: true,
                                removeWayPoints: true,
                            });
                        }
                    }
                );
            },
            function (error) {
                alert("Возникла ошибка: " + error.message);
            }
        );
}