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

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.0/?load=package.standard,package.route&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/1.6.4/jquery.min.js"
            type="text/javascript"
        ></script>

        <script src="router_editor.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
        <input
            type="button"
            value="Включить редактор маршрута"
            id="editor"
            name="start"
        />
    </body>
</html>
ymaps.ready(init);

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

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