JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&mode=debug&lang=ru-RU"></script>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&mode=debug&lang=ru-RU" type="text/javascript"></script>
<div id="map"></div>
CSS
html, body, #map { width: 100%; height: 100%; }
body { margin: 0; padding: 0; }
JavaScript
// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(function() {
var myMap = new ymaps.Map("map", {
center: [57.131311, 34.576128],
zoom: 5
}),
car = new ymaps.GeoObject([55.8, 37.8]);
// Прокладывание маршрута от станции метро "Смоленская"
// до станции Третьяковская (маршрут должен проходить через метро "Арбатская").
// Точки маршрута можно задавать 3 способами: как строка, как объект или как массив геокоординат.
ymaps.route(
[
'Москва, метро Смоленская',
{
type: 'viaPoint', // метро арбатская - транзитная точка (проезжать через эту точку, но не останавливаться в ней)
point: 'Москва, метро Арбатская'
},
[55.74062, 37.62561] // метро "Третьяковская"
], {
// Опции маршрутизатора
mapStateAutoApply: true // автоматически позиционировать карту
}
).then(function (route) {
myMap.geoObjects.add(route);
myMap.geoObjects.add(car);
// Получаем первый маршрут (от метро "Крылатское" до "Молодежная").
var way = route.getPaths().get(0),
// Маршрут состоит из сегментов. Сегмент - участок маршрута, который нужно проехать
// до следующего изменения направления движения.
segments = way.getSegments(),
// открываю массив с точками
moveList = [];
// выполняю операцию для всех сегментов
for (var i = 0; i < segments.length; i++) {
// беру координаты начала и конца сегмента
var street = segments[i].getCoordinates();
// и добавляю их в массив
moveList += (street);
}
// пробую вывести - все отлично, выводится то, что нужно
console.debug(moveList);
// Запуск анимации
console.debug(car);
car.moveTo(moveList, function () {
alert("Приехали!");
});
}, function...