Добрый день, господа! Помогите, пожалуйста, изменить следующее:
После ввода города отправления и прибытия, для того, чтобы открылся балун с расчетом растояния и стоимостью доставки, необходимо жать на пункт А.
Как сделать понятную всем кнопку "Расчитать" после ввода и определнеия городов отправления и назначения? Без необходимости жать на метку. Спасибо большое всем откликнувшимся на просьбу о помощи!
<!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)
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.
}
};
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>