Как интерактивно нарисовать круг на yandex картах?

Question

[Антон Мисягин]

На карте круговая область, которую можно перетаскивать и изменять радиус круга. С отрисовкой и перетаскиванием проблем не возникает, остается только щелкнуть - потянуть, чтобы кружок отрабатывал движение мыши или пальца (центр в месте где щелкнули, край - где отпустили). Пока сделал по двум щелчкам: первый задает центр, второй радиус, отсчитывая от центра. Обновление после второго щелчка:

map.events
			.add('click', function (e) {
				if (prev_position == undefined) {
					prev_position = e.get('coords');
				}
				else {
					var d =	ymaps.coordSystem.geo.getDistance(prev_position, e.get('coords'));
					circle.geometry.setRadius(d);
					circle.geometry.setCoordinates(prev_position);
					prev_position = undefined;
				}
			});

Только в интерактивной версии могут возникнуть проблемы с перемещением по карте (а оно нужно и делается как раз движением нажал-потянул), тогда можно было бы задавать круг правой кнопкой мыши, но нужны и планшеты, поэтому как лучше сделать я не придумал)). Может подскажете как лучше реализовать такое? Есть одна мысль: городить кнопку на карте: "Задать круг". Ее нажимаешь и тогда пользователь в режиме редактирования.
Если тут будет замешано событие mousemove, то как определить зажата ли клавиша?

Answer 1

[Антон Мисягин]

map = new ymaps.Map(map_id, {
				center: position,
				zoom: 10,
				controls: ['zoomControl', 'fullscreenControl']
			});
				circle = new ymaps.Circle([
					[position[0].toFixed(5),position[1].toFixed(5)],
					radius
				], {}, 
				{
					draggable: false,
					fillColor: color1+"33",
					strokeColor: color1,
					strokeOpacity: 0.9,
					strokeWidth: 3
				})
				

				var resize_circle = function(e) {
					if (prev_position != undefined) {
						var d =	Math.round(ymaps.coordSystem.geo.getDistance(prev_position, e.get('coords')));
						if (d > 100000) { d = 100000}
						circle.geometry.setRadius(d);
					} 
				}

				var start_draw_circle = function(e){
					if (circle_mode_button.state.get('selected')) {
						prev_position = e.get('coords');
						circle.geometry.setCoordinates(prev_position);
					}
				}


				circle.events
				.add('mousedown', start_draw_circle)
				.add('mouseup', function (e) {
						prev_position = undefined;
				})
				.add('mousemove', resize_circle);
	

				map.events.
					add('mousedown', start_draw_circle)
					.add('mouseup', function (e) {
						prev_position = undefined;
					})
					.add('mousemove', resize_circle);

				circle_mode_button = new ymaps.control.Button("Рисовать область");
				circle_mode_button.state.set('selected', false);
				circle_mode_button.events.add('select', function(){
					map.behaviors.disable('drag');

				}).add('deselect', function(){
					map.behaviors.enable('drag');
				});
				map.controls.add(circle_mode_button, {float: 'right', maxWidth: 200});
				map.geoObjects.add(circle);

Comments

[Антон Мисягин]

на сенсоре не пробовал