Gemini 2.5 Pro ответил так:
Чтобы связать ваши кастомные поля ввода ( и ) с панелью маршрутов Яндекс Карт (routePanelControl), вам нужно слушать изменения в этих полях (или по нажатию отдельной кнопки) и обновлять состояние панели маршрутов (routePanelControl.routePanel.state) значениями из ваших полей.
Вот как можно модифицировать ваш код:
Добавьте кнопку (рекомендуется) для запуска построения маршрута, чтобы не отправлять запросы на каждый ввод символа. Либо используйте событие change или blur на полях ввода.
Получите ссылки на ваши элементы DOM (поля ввода и кнопку).
Добавьте обработчик событий на кнопку (или поля ввода).
В обработчике считайте значения из ваших полей ввода.
Используйте метод routePanelControl.routePanel.state.set() для установки начальной (from) и конечной (to) точек маршрута. Панель автоматически обновится и запросит новый маршрут.
Пример модифицированного HTML и JavaScript:
HTML:
<input type="text" id="from" placeholder="Откуда">
<input type="text" id="to" placeholder="Куда">
<button id="calculateRoute">Построить маршрут</button> <div id="map0" style="width: 600px; height: 400px;"></div> ```
JavaScript:
ymaps.ready(init);
function init() {
// Получаем ссылки на кастомные поля и кнопку
var fromInput = document.getElementById('from');
var toInput = document.getElementById('to');
var calculateButton = document.getElementById('calculateRoute');
// Начальная точка для карты (можно оставить ваш геокодер или задать статично)
var startPointCoords = [57.626559, 39.893813]; // Ярославль, например
var myMap0 = new ymaps.Map('map0', {
center: startPointCoords,
zoom: 11,
type: 'yandex#map',
controls: [] // Убираем стандартные контролы, т.к. добавляем свои
});
var routePanelControl = new ymaps.control.RoutePanel({
options: {
showHeader: true,
title: 'Построение маршрута',
routePanelTypes: { taxi: true },
autofocus: false,
// Можно скрыть стандартные поля ввода панели, если они мешают,
// но это может потребовать CSS или поиска недокументированных опций.
// Проще оставить их, но управлять через свои поля.
}
});
// Устанавливаем начальный тип маршрута для панели
routePanelControl.routePanel.state.set({
type: "taxi",
// Можно установить начальные значения из полей, если они заполнены при загрузке
// from: fromInput.value,
// to: toInput.value
});
var zoomControl = new ymaps.control.ZoomControl({
options: {
size: 'small',
float: 'none',
position: {
bottom: 145,
right: 10
}
}
});
// Добавляем контролы на карту
myMap0.controls.add(routePanelControl).add(zoomControl);
// --- Логика связывания кастомных полей ---
function updateRoute() {
var fromValue = fromInput.value;
var toValue = toInput.value;
if (fromValue && toValue) { // Проверяем, что оба поля не пустые
// Устанавливаем 'from' и 'to' в состояние панели маршрутов
routePanelControl.routePanel.state.set({
from: fromValue,
to: toValue
});
console.log('Запрос на построение маршрута от:', fromValue, 'до:', toValue);
// Панель автоматически попытается построить маршрут после изменения состояния
} else {
// Можно вывести сообщение пользователю, что нужно заполнить поля
console.log('Пожалуйста, заполните оба поля адреса.');
// Или очистить панель маршрутов, если нужно
// routePanelControl.routePanel.state.set({ from: '', to: '' });
}
}
// Добавляем обработчик на кнопку
if (calculateButton) {
calculateButton.addEventListener('click', updateRoute);
}
// --- Обработка результата построения маршрута (ваш существующий код) ---
// Важно: getRouteAsync() вызывается панелью автоматически при изменении state.
// Этот обработчик requestsuccess будет срабатывать каждый раз, когда маршрут успешно построен (или обновлен).
routePanelControl.routePanel.getRouteAsync().then(function(route) {
// Устанавливаем параметры модели маршрута (например, только 1 вариант)
route.model.setParams({ results: 1 }, true);
// Слушаем событие успешного построения маршрута
route.model.events.add('requestsuccess', function() {
var activeRoute = route.getActiveRoute();
if (activeRoute) {
var length = activeRoute.properties.get("distance");
var duration = activeRoute.properties.get("duration");
var durationInTraffic = activeRoute.properties.get("durationInTraffic");
var wayPoints = route.getWayPoints(); // Используем route, а не route.model для точек
var fromPoint = wayPoints.get(0).properties.get('name'); // Первая точка - откуда
var toPoint = wayPoints.get(wayPoints.getLength() - 1).properties.get('name'); // Последняя точка - куда
var price_yandex_data = route.properties.get("taxiRouteInfo"); // Используем taxiRouteInfo для получения цены
// Выводим информацию в консоль для проверки
console.log('Маршрут построен:');
console.log('Откуда:', fromPoint);
console.log('Куда:', toPoint);
if (length) {
console.log('Расстояние:', round(length.value / 1000, 2) + ' ' + length.text);
}
if (duration) {
console.log('Время в пути (без пробок):', duration.text);
}
if (durationInTraffic) {
console.log('Время в пути (с пробками):', durationInTraffic.text);
}
if (price_yandex_data && price_yandex_data.length > 0) {
// Ищем самый дешевый тариф (может быть несколько классов)
let cheapest = price_yandex_data.reduce((min, p) => p.price.value < min.price.value ? p : min, price_yandex_data[0]);
console.log('Примерная стоимость такси ('+cheapest.className+'):', cheapest.price.text);
} else {
console.log('Информация о стоимости такси недоступна.');
}
} else {
console.log("Активный маршрут не найден.");
}
});
// Слушаем событие ошибки построения маршрута (рекомендуется)
route.model.events.add('requestfail', function (event) {
console.error("Ошибка построения маршрута:", event.get('error'));
alert("Не удалось построить маршрут. Проверьте правильность адресов.");
});
// Можно инициировать построение маршрута при загрузке, если поля уже заполнены
// updateRoute(); // Раскомментируйте, если нужно строить маршрут сразу
}).catch(function(err){
console.error("Не удалось получить объект маршрута:", err);
});
} // конец функции init
// Вспомогательная функция округления (ваша существующая)
function round(a, b) {
b = b || 0;
return Math.round(a * Math.pow(10, b)) / Math.pow(10, b);
}
Пояснения:
1. Ссылки на Элементы: С помощью document.getElementById получаем доступ к полям from, to и кнопке calculateRoute.
2. Кнопка и Обработчик: Добавлена кнопка и слушатель события click. При нажатии вызывается функция updateRoute.
3. updateRoute: Эта функция считывает текущие значения из полей #from и #to.
4. routePanelControl.routePanel.state.set({...}): Ключевой момент. Этот метод обновляет внутреннее состояние панели маршрутов. Когда вы устанавливаете свойства from и to, панель автоматически инициирует процесс геокодирования введенных адресов и построения маршрута между ними.
5. Обработка Результата: Ваш существующий код внутри route.model.events.add('requestsuccess', ...) будет корректно срабатывать каждый раз, когда панель успешно обновит маршрут после изменения состояния через state.set(). Я немного поправил получение точек from/to и информации о такси для большей точности.
6. Обработка Ошибок: Добавлен обработчик requestfail для отслеживания ситуаций, когда маршрут не может быть построен (например, не найден адрес).
7. Скрытие Стандартных Полей: Если вы хотите полностью скрыть стандартные поля ввода панели маршрутов, это может потребовать дополнительной настройки через CSS (поиск и скрытие соответствующих классов .ymaps-...) или поиска недокументированных опций в API. Однако, использование state.set() работает и с видимыми полями панели - они будут обновляться значениями из ваших полей.