JSFiddle - React, Tailwind, and code Playground
HTML
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=2541a305-4070-4156-97c3-5e71858d305b"></script>
<div id="map"></div>
CSS
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
function init () {
/**
* Создание мультимаршрута.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
*/
var multiRoute = new ymaps.multiRouter.MultiRoute({
referencePoints: []
}, {
// Тип промежуточных точек, которые могут быть добавлены при редактировании.
editorMidPointsType: "via",
// В режиме добавления новых путевых точек запрещаем ставить точки поверх объектов карты.
editorDrawOver: false
});
// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map('map', {
center: [56.399625, 36.71120],
zoom: 7,
controls: []
}, {
buttonMaxWidth: 300
});
// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute);
multiRoute.editor.start({
addWayPoints: true,
removeWayPoints: true
});
multiRoute.events.add(
["update"],
function() {
if (multiRoute.getWayPoints().getLength() >= 2) {
console.log(multiRoute.getRoutes().getLength());
//console.log(multiRoute.getRoutes().getLength());
// Если на карте больше 2 точек маршрута, отключаем добавление новых точек.
multiRoute.editor.stop();
multiRoute.editor.start({
addWayPoints: false,
removeWayPoints: true
});
} else {
// Включаем добавление новых точек.
multiRoute.editor.stop();
multiRoute.editor.start({
addWayPoints: true,
removeWayPoints: true
});
}
}
);
}
ymaps.ready(init);