Как подключить свои поля для маршрута в Яндекс.Картах

При работе с API Яндекс.Карт часто возникает задача - использовать собственные поля ввода (например, <input>) вместо стандартной панели маршрута. Это нужно, чтобы данные о начальной и конечной точках передавались на карту и обрабатывались в RoutePanel. В этой статье мы разберём, как настроить кастомные поля, связать их с геокодером и получить данные маршрута (расстояние, время, стоимость такси).

Зачем нужны свои поля ввода

Стандартная панель RoutePanel работает из коробки, но часто требуется:

• встраивать поля в дизайн сайта;
• использовать автозаполнение или подсказки;
• получать данные маршрута (например, цену такси) в собственные переменные.

Для этого нужно подключить свои input и управлять состоянием панели через JavaScript.

Базовая структура HTML и инициализация карты

Создайте два поля ввода для адресов отправления и назначения, а также контейнер для карты:

<input type="text" id="from" placeholder="Откуда">
<input type="text" id="to" placeholder="Куда">
<div id="map0" style="width: 600px; height: 400px;"></div>

Затем инициализируйте карту с панелью маршрута. Важно: панель можно скрыть, оставив только логику построения.

Привязка кастомных полей к RoutePanel

В функции init() после создания карты добавьте панель маршрута и установите её состояние. Чтобы данные из ваших полей попадали на карту, используйте событие input или кнопку «Построить»:

routePanelControl.routePanel.state.set({
  from: document.getElementById('from').value,
  to: document.getElementById('to').value
});

Также можно подписаться на изменения полей и автоматически обновлять маршрут.

Получение данных маршрута (расстояние, время, цена такси)

После того как маршрут построен, получите активный маршрут через route.getActiveRoute(). Пример извлечения данных:

• Расстояние: route.getActiveRoute().properties.get("distance").text
• Время без пробок: route.getActiveRoute().properties.get("duration").text
• Время с пробками: route.getActiveRoute().properties.get("durationInTraffic").text
• Цена такси: route.properties.get("taxi").cheapest.price (в копейках)

Эти значения можно вывести в любые элементы на странице.

Полный пример кода с пояснениями

Ниже приведён рабочий фрагмент, который связывает поля, строит маршрут и выводит стоимость такси:

ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map('map0', {
    center: [55.76, 37.64],
    zoom: 10
  });

  var routePanel = new ymaps.control.RoutePanel({
    options: { showHeader: false }
  });

  myMap.controls.add(routePanel);

  // Устанавливаем кастомные поля
  routePanel.routePanel.state.set({
    from: document.getElementById('from').value,
    to: document.getElementById('to').value
  });

  // Событие при успешном построении
  routePanel.routePanel.getRouteAsync().then(function(route) {
    route.model.events.add('requestsuccess', function() {
      var activeRoute = route.getActiveRoute();
      if (activeRoute) {
        var distance = activeRoute.properties.get('distance').text;
        var duration = activeRoute.properties.get('duration').text;
        var price = route.properties.get('taxi').cheapest.price / 100;
        console.log('Расстояние:', distance, 'Время:', duration, 'Цена:', price + ' руб.');
      }
    });
  });
}

Не забудьте подключить API Яндекс.Карт с ключом и модулем route.

Типичные ошибки и их решение

• Маршрут не строится: проверьте, что поля не пустые, и адреса распознаются геокодером.
• Цена такси не отображается: убедитесь, что в панели включён тип taxi: true.
• Данные не обновляются: после изменения полей вызывайте routePanel.routePanel.state.set(...) заново.

Теперь вы знаете, как подключать свои поля для маршрута в Яндекс.Картах и получать все необходимые данные для дальнейшей обработки.