К большому моему сожалению я в api яндекса профан
(( а задача такая есть.
Могли бы вы мне помочь хотя бы с определением некоторых функций? Привожу мой код полностью на данной стадии
<!DOCTYPE html>
<html>
<head>
<title>Расчет стоимости доставки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Подключаем API карт 2.x -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<script src="//api-maps.yandex.ru/2.0.31/?load=package.standard,package.geoObjects,package. geoQuery&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("Dostavka")
function init() {
var myMap = new ymaps.Map('Dostavka', {
center: [55.751242, 37.618422],
zoom: 10,
type: 'yandex#map',
behaviors: ['scrollZoom', 'drag']
}),
search = new ymaps.control.SearchControl({// Контроллер поиска, здесь задаются "ограничители" карты, границы видимой области и пр.
useMapBounds: true,
noCentering: true,
noPlacemark: true
}),
circle = new ymaps.Circle([myMap.getCenter(), 18000], null, { draggable: true }),
calculator = new DeliveryCalculator(myMap, myMap.getCenter());// Функция расчета доставки приведена ниже
var objects = ymaps.geoQuery([
{
type: 'Point',
coordinates: [55.73, 37.75]
},
{
type: 'Point',
coordinates: [55.10, 37.45]
},
{
type: 'Point',
coordinates: [55.25, 37.35]
}
]).addToMap(myMap);
circle.events.add('drag', function () {
// Объекты, попадающие в круг, будут становиться красными.
var objectsInsideCircle = objects.searchInside(circle);
objectsInsideCircle.setOptions('preset', 'twirl#redIcon');
// Оставшиеся объекты - синими.
objects.remove(objectsInsideCircle).setOptions('pr eset', 'twirl#blueIcon');
});
myMap.geoObjects.add(circle);
myMap.controls.add(search, { right: 5, top: 5 });// Добавление этого элемента (контроллера)
search.events.add('resultselect', function (e) {
var results = search.getResultsArray(),
selected = e.get('resultIndex'),
point = results[selected].geometry.getCoordinates();
calculator.setStartPoint(point);// Задание начальной точки (адрес клиента)
});
}
// Функция, отвечающая за метки начальной и конечной точек и добавление события клика по метке адреса клиента
function DeliveryCalculator(map, finish) {
this._map = map;
this._start = null;
this._finish = new ymaps.Placemark(finish,{
iconContent: '',
balloonContentHeader: 'ООО "Стальные Двери Гранит"',
balloonContentBody: '<p>г. Санкт-Петербург, пр. Обуховской обороны,<br>дом 120, лит.Б, каб. 320, БЦ Троицкое Поле 2</p>',
balloonContentFooter: 'Тел.: 8(812) 927-03-34'
}, {
iconImageHref: 'http://dverigranit.ru/images/logo_map.png',// Если что, стандартный значок можно взять отсюда:
iconImageSize: [28, 32],//
http://api.yandex.ru/maps/doc/jsapi/...setStorage.xml
iconImageOffset: [-17, -37]
});
this._route = null;// Обнуление маршрута
map.events.add('click', this._onStartPointChange, this);
map.geoObjects.add(this._finish);
}
var ptp = DeliveryCalculator.prototype;// Прототип функции
ptp._onStartPointChange = function (e) {
this.setStartPoint(e.get('coordPosition'));// Определние стартовой точки (точки клиента)
};
// Прокладка маршрута и получение геометрии
ptp.getDirections = function () {
var self = this,
start = this._start.geometry.getCoordinates(),
finish = this._finish.geometry.getCoordinates();
if(this._route) {
this._map.geoObjects.remove(this._route);
}
ymaps.geocode(start, { results: 1 })
.then(function (geocode) {
var address = geocode.geoObjects.get(0) &&
geocode.geoObjects.get(0).properties.get('balloonC ontentBody') || '';
// Это вывод результата расчета в балун (окно сообщения)
ymaps.route([start, finish])
.then(function (router) {
var distance = Math.round(router.getLength() / 1000),
message = 'Расстояние: ' + distance + ' км.<br/>' +
'<span style="font-weight: bold; font-style: italic">Стоимость доставки: %s р.</span>';
// Применение функции calculate, вычисляющей стоимость доставки
self._route = router.getPaths();
self._route.options.set({ strokeWidth: 5, strokeColor: '#ff0000', opacity: 1 });
self._map.geoObjects.add(self._route);
self._start.properties.set('balloonContentBody', address + message.replace('%s', self.calculate(distance)));
self._start.balloon.open();
});
});
};
// Задание старта по координате
ptp.setStartPoint = function (position) {
if(this._start) {
this._start.geometry.setCoordinates(position);
}
else {
this._start = new ymaps.Placemark(position, { iconContent: 'Я' });// Иконку стандартную для клиента сделал
this._start.events.add('dragend', this._onStartPointChange, this);
this._map.geoObjects.add(this._start);
}
this.getDirections();
};
// Функция, рассчитывающая стоимость по заданным коэффициентам - 20 руб. и 30 руб. соответственно
ptp.calculate = function (len) {
// Константы
var DELIVERY_TARIF_UP_TO_30 = 20,
DELIVERY_TARIF_OVER_30 = 30,
MINIMUM_COST = 0;// Минимальная цена доставки (внутри КАД доаставка бесплатная)
if(len<15) {
return 0;
}
else {
if((len>=15) && (len<30)) return Math.max((len-15) * DELIVERY_TARIF_UP_TO_30, MINIMUM_COST);
if(len>=30) return Math.max((len-15) * DELIVERY_TARIF_OVER_30, MINIMUM_COST);
}
};
// Выполняем инициализацию
ymaps.ready(init);
</script>
</head>
<body>
<div id="Dostavka" style="width: 800px; height: 600px"></div>
</body>
</html>
Это код определения маршрута доставки. Я обозначил некоторую область кругом (область МКАД). Сейчас метки статические и они подсвечиваются красным цветом при наведениии на них моей области. Но мне нужно чтобы при нажатии на карту ставилась метка и считался маршрут, как это и сейчас делается, НО: при нажатии на область вне этого круга, метка ставилась бы красная, а при попадании в область, метка была бы синей?
В какой функции и как это лучше всего осуществить - ума не приложу. Можете подсказать, как это сделать?