Клуб API Карт

Как сделать так, чтобы в шапке происходил расчет стоимости как в примере что я приложил, и отображался балун с информацией о маршруте и кнопка подробнее на самой карте?

nikon7225
5 ноября 2017, 10:28

сам скрипт

ymaps.ready(init);

function init() {
    // Стоимость за километр.
    var DELIVERY_TARIF = 17,
    // Минимальная стоимость.
        MINIMUM_COST = 150,
    // Заголовок панели.
        TITLE = 'Расчёт трансфер',
        myMap = new ymaps.Map('map', {
            center: [44.82707260919204,34.89896601000974],
            zoom: 9,
            type: 'yandex#map',
            controls: []
        }),
        
    // Создадим панель маршрутизации.
        routePanelControl = new ymaps.control.RoutePanel({
            options: {
                // Добавим заголовок панели.
                showHeader: true,
                title: TITLE
            }
        }),
        zoomControl = new ymaps.control.ZoomControl({
            options: {
                size: 'small',
                float: 'none',
                position: {
                    bottom: 350,
                    right: 10
                }
            }
        });
    // Пользователь сможет построить только автомобильный маршрут.
    routePanelControl.routePanel.options.set({
        types: {auto: true}
    });

 
 
    myMap.controls.add(routePanelControl).add(zoomControl);

    // Получим ссылку на маршрут.
    routePanelControl.routePanel.getRouteAsync().then(function (route) {

        // Повесим обработчик на событие построения маршрута.
        route.model.events.add('requestsuccess', function () {

            var activeRoute = route.getActiveRoute();
            if (activeRoute) {
                // Получим длину маршрута.
                var length = route.getActiveRoute().properties.get("distance"),
                // Вычислим стоимость маршрута.
                    price = calculate(Math.round(length.value / 1000)),
                // Создаём макет содержимого балуна маршрута.
            
                balloonContentLayout=ymaps.templateLayoutFactory.createClass(
                        '<span>Расстояние: ' + length.text + '.</span><br/>' +
                        '<span style="font-weight: bold; font-style: italic">Стоимость трансфер: ' + price + ' ₽.</span>');
                    
                // Задаём макет содержимого балуна маршрута.
                
                route.options.set('routeBalloonContentLayout', balloonContentLayout);
                // Задаём заголовок панели.
                routePanelControl.options.set('title', length.text + ' / ' + price + ' ₽.')
            } else {
                // Если на карте нет построенного маршрута, задаём дефолтный заголовок панели.
                routePanelControl.options.set('title', TITLE)
            }
        });

    });
    // Вычисляем стоимость маршрута.
    function calculate(routeLength) {
        return Math.max(routeLength * DELIVERY_TARIF, MINIMUM_COST);
    }
}