Форум

mafin · #1 (**permalink**) 31.08.2013, 14:13

Здравствуйте, уважаемые гуру! В JavaScript я новичок, но у меня есть така я задача: определить попадает ли выбранная точка в область московской кольцевой автомобильной дороги на Яндекс.Карте. Приведенный ниже код рассчитывает стоимость доставки, но мне необходимо сделать доставку в пределах МКАД бесплатной. И моя задача на данном этапе определить по нажатии на карту (при клике), попадает ли данная точка в область МКАД. Координаты каждого километра МКАД я задаю в массиве. Вообщем вот код с некоторыми комментариями, мне требуется помощь лишь в небольшом его фрагменте.

Код:

<!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 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
        }),
		calculator = new DeliveryCalculator(myMap, myMap.getCenter());		// Функция расчета доставки приведена ниже
	
    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);	// Задание начальной точки (адрес клиента)
    });

	
	//Добавляем элементы управления. Я тут все подряд насажал, но решил убрать потом, т.к. мешает это, да и клиенту не нужно
/*	myMap.controls
    // Кнопка изменения масштаба
    .add('zoomControl')
    // Список типов карты
    .add('typeSelector')
    // Кнопка изменения масштаба - компактный вариант
    // Расположим её справа
    .add('smallZoomControl', { right: 5, top: 75 })
    // Стандартный набор кнопок
    .add('mapTools')	
	//Линейка масштаба
	.add(new ymaps.control.ScaleLine())		*/

}

// Функция, отвечающая за метки начальной и конечной точек и добавление события клика по метке адреса клиента
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/2.x/ref/reference/option.presetStorage.xml
        iconImageOffset: [-17, -37]
	});
    this._route = null;		// Обнуление маршрута
	
    map.events.add('click', this._onStartPointChange, this);
    map.geoObjects.add(this._finish);

	// Создаем полигон МКАД по заданным координатам mkad_km
    var polygon = new ymaps.Polygon();
    for(i = 0; i < 108; i++) {
    	polygon.addPoint(new ymaps.GeoPoint(mkad_km[i][1],mkad_km[i][2]));
    }
    myMap.addOverlay(polygon); // Обязательно добавляем на карту, иначе не будет работать

	// Поставим метку по клику над картой
	myMap.events.add('click', function (e) {
		var pos = e.get('coordPosition');
			pnt = new ymaps.GeoPoint(55.788172, 37.672375);
		if(polygon.contains(pnt)) {	
			myMap.geoObjects.add(new ymaps.Placemark(pos));
		}
	});

			
}

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('balloonContentBody') || '';

			// Это вывод результата расчета в балун (окно сообщения)
            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>

А именно мне нужно, чтобы при клике на карту, выходило сообщение, что точка попала в область МКАД. Или ставилась метка и в балуне писалось сообщение об этом. В общем то как угодно. Вот в этом месте кода:

Код:

	// Создаем полигон МКАД по заданным координатам mkad_km
    var polygon = new ymaps.Polygon();
    for(i = 0; i < 108; i++) {
    	polygon.addPoint(new ymaps.GeoPoint(mkad_km[i][1],mkad_km[i][2]));
    }
    myMap.addOverlay(polygon); // Обязательно добавляем на карту, иначе не будет работать

	// Поставим метку по клику над картой
	myMap.events.add('click', function (e) {
		var pos = e.get('coordPosition');
			pnt = new ymaps.GeoPoint(55.788172, 37.672375);
		if(polygon.contains(pnt)) {	
			myMap.geoObjects.add(new ymaps.Placemark(pos));
		}
	});

Буду рад любой помощи! Очень на нее надеюсь! Спасибо.

mafin · #2 (**permalink**) 31.08.2013, 14:13

Сам массив координат вот:

//Координаты каждого километра МКАД в массиве
var mkad_km =  [
[1,37.842762,55.774558],
[2,37.842789,55.76522],
[3,37.842627,55.755723],
[4,37.841828,55.747399],
[5,37.841217,55.739103],
[6,37.840175,55.730482],
[7,37.83916,55.721939],
[8,37.837121,55.712203],
[9,37.83262,55.703048],
[10,37.829512,55.694287],
[11,37.831353,55.68529],
[12,37.834605,55.675945],
[13,37.837597,55.667752],
[14,37.839348,55.658667],
[15,37.833842,55.650053],
[16,37.824787,55.643713],
[17,37.814564,55.637347],
[18,37.802473,55.62913],
[19,37.794235,55.623758],
[20,37.781928,55.617713],
[21,37.771139,55.611755],
[22,37.758725,55.604956],
[23,37.747945,55.599677],
[24,37.734785,55.594143],
[25,37.723062,55.589234],
[26,37.709425,55.583983],
[27,37.696256,55.578834],
[28,37.683167,55.574019],
[29,37.668911,55.571999],
[30,37.647765,55.573093],
[31,37.633419,55.573928],
[32,37.616719,55.574732],
[33,37.60107,55.575816],
[34,37.586536,55.5778],
[35,37.571938,55.581271],
[36,37.555732,55.585143],
[37,37.545132,55.587509],
[38,37.526366,55.5922],
[39,37.516108,55.594728],
[40,37.502274,55.60249],
[41,37.49391,55.609685],
[42,37.484846,55.617424],
[43,37.474668,55.625801],
[44,37.469925,55.630207],
[45,37.456864,55.641041],
[46,37.448195,55.648794],
[47,37.441125,55.654675],
[48,37.434424,55.660424],
[49,37.42598,55.670701],
[50,37.418712,55.67994],
[51,37.414868,55.686873],
[52,37.407528,55.695697],
[53,37.397952,55.702805],
[54,37.388969,55.709657],
[55,37.383283,55.718273],
[56,37.378369,55.728581],
[57,37.374991,55.735201],
[58,37.370248,55.744789],
[59,37.369188,55.75435],
[60,37.369053,55.762936],
[61,37.369619,55.771444],
[62,37.369853,55.779722],
[63,37.372943,55.789542],
[64,37.379824,55.79723],
[65,37.386876,55.805796],
[66,37.390397,55.814629],
[67,37.393236,55.823606],
[68,37.395275,55.83251],
[69,37.394709,55.840376],
[70,37.393056,55.850141],
[71,37.397314,55.858801],
[72,37.405588,55.867051],
[73,37.416601,55.872703],
[74,37.429429,55.877041],
[75,37.443596,55.881091],
[76,37.459065,55.882828],
[77,37.473096,55.884625],
[78,37.48861,55.888897],
[79,37.5016,55.894232],
[80,37.513206,55.899578],
[81,37.527597,55.90526],
[82,37.543443,55.907687],
[83,37.559577,55.909388],
[84,37.575531,55.910907],
[85,37.590344,55.909257],
[86,37.604637,55.905472],
[87,37.619603,55.901637],
[88,37.635961,55.898533],
[89,37.647648,55.896973],
[90,37.667878,55.895449],
[91,37.681721,55.894868],
[92,37.698807,55.893884],
[93,37.712363,55.889094],
[94,37.723636,55.883555],
[95,37.735791,55.877501],
[96,37.741261,55.874698],
[97,37.764519,55.862464],
[98,37.765992,55.861979],
[99,37.788216,55.850257],
[100,37.788522,55.850383],
[101,37.800586,55.844167],
[102,37.822819,55.832707],
[103,37.829754,55.828789],
[104,37.837148,55.821072],
[105,37.838926,55.811599],
[106,37.840004,55.802781],
[107,37.840965,55.793991],
[108,37.841576,55.785017]
];

mafin · #3 (**permalink**) 01.09.2013, 20:14

Неужели никто не может помочь по api яндекса?

Яростный Меч · #4 (**permalink**) 01.09.2013, 20:34

mafin,

создай из своих точек полигон.

у него есть метод contains, как раз для твоей задачи. По идее должно работать.

Яростный Меч · #5 (**permalink**) 01.09.2013, 20:38

если не получится, придется вручную определять..

mafin · #6 (**permalink**) 02.09.2013, 11:39

Яростный меч,
спасибо, попробую!

mafin · #7 (**permalink**) 03.09.2013, 12:19

К большому моему сожалению я в api яндекса профан

(( а задача такая есть.

Могли бы вы мне помочь хотя бы с определением некоторых функций? Привожу мой код полностью на данной стадии

<!DOCTYPE html>

<html>

<head>

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

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



<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>

Это код определения маршрута доставки. Я обозначил некоторую область кругом (область МКАД). Сейчас метки статические и они подсвечиваются красным цветом при наведениии на них моей области. Но мне нужно чтобы при нажатии на карту ставилась метка и считался маршрут, как это и сейчас делается, НО: при нажатии на область вне этого круга, метка ставилась бы красная, а при попадании в область, метка была бы синей? В какой функции и как это лучше всего осуществить - ума не приложу. Можете подсказать, как это сделать?

Форум

Справочник

Discord чат

Курсы javascript