Клуб API Карт

Изменить поведение кнопки на карте при расчете расстояния

Пост в архиве.
rusavtoset.com
25 июня 2014, 11:07

Добрый день, господа! Помогите, пожалуйста, изменить следующее:

 

После ввода города отправления и прибытия, для того, чтобы открылся балун с расчетом растояния и стоимостью доставки, необходимо жать на пункт А.

 

Как сделать понятную всем кнопку "Расчитать" после ввода и определнеия городов отправления и назначения? Без необходимости жать на метку. Спасибо большое всем откликнувшимся на просьбу о помощи!

 

 

<!DOCTYPE html>

<html>

<head>

    <title>Расчет стоимости доставки</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->

    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

    <style>

        html, body, #map {

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

.ymaps-search__input {

width: 155px !important;}

.ymaps-balloon__content {

text-align: left !important;

 

    </style>

 

<script type="text/javascript">

function init() {

    var myMap = new ymaps.Map('map', {

            center: [58.003641,56.225284],

            zoom: 4,

            type: 'yandex#map',

            behaviors: ['scrollZoom', 'drag'],

            controls: ['zoomControl']

        }),

 

 

        searchStartPoint = new ymaps.control.SearchControl({

            options: {

                useMapBounds: true,

                noPlacemark: true,

                noPopup: true,

                placeholderContent: 'Из города',

                size: 'large',

float: 'left',

position: { left: 5, top: 10 }

            }

        }),

        searchFinishPoint = new ymaps.control.SearchControl({

            options: {

                useMapBounds: true,

                noCentering: true,

                noPopup: true,

                noPlacemark: true,

                placeholderContent: 'В город',

                size: 'large',

                float: 'left',

position: { left: 5, top: 44 }

            }

        }),

        calculator = new DeliveryCalculator(myMap, myMap.getCenter());

 

    myMap.controls.add(searchStartPoint);

    myMap.controls.add(searchFinishPoint);

 

    searchStartPoint.events.add('resultselect', function (e) {

        var results = searchStartPoint.getResultsArray(),

            selected = e.get('index'),

            point = results[selected].geometry.getCoordinates();

 

        calculator.setStartPoint(point);

    })

        .add('load', function (event) {

            // По полю skip определяем, что это не дозагрузка данных.

            // По getRusultsCount определяем, что есть хотя бы 1 результат.

            if (!event.get('skip') && searchStartPoint.getResultsCount()) {

                searchStartPoint.showResult(0);

            }

        });

 

    searchFinishPoint.events.add('resultselect', function (e) {

        var results = searchFinishPoint.getResultsArray(),

            selected = e.get('index'),

            point = results[selected].geometry.getCoordinates();

 

        calculator.setFinishPoint(point);

    })

        .add('load', function (event) {

            // По полю skip определяем, что это не дозагрузка данных.

            // По getRusultsCount определяем, что есть хотя бы 1 результат.

            if (!event.get('skip') && searchFinishPoint.getResultsCount()) {

                searchFinishPoint.showResult(0);

            }

        });

}

 

function DeliveryCalculator(map, finish) {

    this._map = map;

    this._start = null;

    this._route = null;

 

    map.events.add('click', this._onClick, this);

}

 

var ptp = DeliveryCalculator.prototype;

 

ptp._onClick= function (e) {

    if (this._start) {

        this.setFinishPoint(e.get('coords'));

    } else {

        this.setStartPoint(e.get('coords'));

    }

};

 

ptp._onDragEnd = function (e) {

    this.getDirection();

}

 

ptp.getDirection = function () {

    if(this._route) {

        this._map.geoObjects.remove(this._route);

    }

 

    if (this._start && this._finish) {

        var self = this,

            start = this._start.geometry.getCoordinates(),

            finish = this._finish.geometry.getCoordinates();

 

        ymaps.geocode(start, { results: 1 })

            .then(function (geocode) {

                var address = geocode.geoObjects.get(0) &&

                    geocode.geoObjects.get(0).properties.get('balloonContentBody') || '';

 

                ymaps.route([start, finish])

                    .then(function (router) {

                        var distance = Math.round(router.getLength() / 2000),

                            message = '<br>Расстояние: <b>' + distance + ' км.</b><br><br>' +

                                'Стоимость доставки техники:<br><div style="font-size:20px !important;"><b>%sр.</b></div><br>';

 

                        self._route = router.getPaths();

 

                        self._route.options.set({ strokeWidth: 5, strokeColor: '0000ffff', opacity: 0.5 });

                        self._map.geoObjects.add(self._route);

                        self._start.properties.set('balloonContentBody', message.replace('%s', self.calculate(distance)));

 

                    });

            });

        self._map.setBounds(self._map.geoObjects.getBounds())

    }

};

 

ptp.setStartPoint = function (position) {

    if(this._start) {

        this._start.geometry.setCoordinates(position);

    }

    else {

        this._start = new ymaps.Placemark(position, { iconContent: 'А' }, { draggable: false });

        this._start.events.add('dragend', this._onDragEnd, this);

        this._map.geoObjects.add(this._start);

    }

    if (this._finish) {

        this.getDirection();

    }

};

 

ptp.setFinishPoint = function (position) {

    if(this._finish) {

        this._finish.geometry.setCoordinates(position);

    }

    else {

        this._finish = new ymaps.Placemark(position, { iconContent: ' Б' }, { draggable: false });

        this._finish.events.add('dragend', this._onDragEnd, this);

        this._map.geoObjects.add(this._finish);

    }

    if (this._start) {

        this.getDirection();

    }

};

 

ptp.calculate = function (len) {

    // Константы.

    var DELIVERY_TARIF = 35,

        MINIMUM_COST = 500;

 

    return Math.max(len * DELIVERY_TARIF, MINIMUM_COST);

};

 

ymaps.ready(init);

 

 

</script>

</head>

<body>

<div id="map" style="width:225px; height:550px"></div>

</body>

</html>

 

 

 

 

Пример: http://elbu.ru/road.php
4 комментария

А не проще сразу открыть балун и держать его открытым, раз у вас в нем отображается стоимость доставки.

 

P.S.: Такой большой код можно было бы вынести в "джсфиддл" или использовать тут врезку.

Большое спасибо за ответ!

 

Безусловно, было бы отлично всегда отображать балун, но не смог разобраться в песочнице, как :(

 

Буду очень признателен за помощь!

Ну вы же присваиваете контент балуну? Что вам мешает потом его открыть?

Еще можно позаботиться о том, что бы его не закрыли (хотя его можно же вновь открыть по клику на точку?)

Если я правильно понимаю, нужно добавить

 

balloonCloseButton: false,
balloonPanelMaxMapArea: 'Infinity'


Но вот куда точно это прописать?!