Gemini 2.5 Pro ответил так: <br/> Чтобы связать ваши кастомные поля ввода ( и ) с панелью маршрутов Яндекс Карт (routePanelControl), вам нужно слушать изменения в этих полях (или по нажатию отдельной кнопки) и обновлять состояние панели маршрутов (routePanelControl.routePanel.state) значениями из ваших полей. <br/> <br/> Вот как можно модифицировать ваш код: <br/> <br/> Добавьте кнопку (рекомендуется) для запуска построения маршрута, чтобы не отправлять запросы на каждый ввод символа. Либо используйте событие change или blur на полях ввода. <br/> Получите ссылки на ваши элементы DOM (поля ввода и кнопку). <br/> Добавьте обработчик событий на кнопку (или поля ввода). <br/> В обработчике считайте значения из ваших полей ввода. <br/> Используйте метод routePanelControl.routePanel.state.set() для установки начальной (from) и конечной (to) точек маршрута. Панель автоматически обновится и запросит новый маршрут. <br/> Пример модифицированного HTML и JavaScript: <br/> <br/> HTML: <br/> <pre><code class="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> ```</code></pre> <br/> JavaScript: <br/> <pre><code class="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);
}</code></pre> <br/> Пояснения: <br/> 1. Ссылки на Элементы: С помощью document.getElementById получаем доступ к полям from, to и кнопке calculateRoute. <br/> 2. Кнопка и Обработчик: Добавлена кнопка и слушатель события click. При нажатии вызывается функция updateRoute. <br/> 3. updateRoute: Эта функция считывает текущие значения из полей #from и #to. <br/> 4. routePanelControl.routePanel.state.set({...}): Ключевой момент. Этот метод обновляет внутреннее состояние панели маршрутов. Когда вы устанавливаете свойства from и to, панель автоматически инициирует процесс геокодирования введенных адресов и построения маршрута между ними. <br/> 5. Обработка Результата: Ваш существующий код внутри route.model.events.add('requestsuccess', ...) будет корректно срабатывать каждый раз, когда панель успешно обновит маршрут после изменения состояния через state.set(). Я немного поправил получение точек from/to и информации о такси для большей точности. <br/> 6. Обработка Ошибок: Добавлен обработчик requestfail для отслеживания ситуаций, когда маршрут не может быть построен (например, не найден адрес). <br/> 7. Скрытие Стандартных Полей: Если вы хотите полностью скрыть стандартные поля ввода панели маршрутов, это может потребовать дополнительной настройки через CSS (поиск и скрытие соответствующих классов .ymaps-...) или поиска недокументированных опций в API. Однако, использование state.set() работает и с видимыми полями панели - они будут обновляться значениями из ваших полей.