В общем, сайт будет представлять собой сервис, с помощью которого пользователи смогут сообщать о том, по какому адресу у них что-то случилось. Для этого на главной странице сайта создана Яндекс.Карта со стандартными элементами управления + searchControl + пользовательская кнопка, а справа от карты расположена обычная HTML-форма (<form>), в которой пользователь будет указывать подробности неполадки. В общем надо сделать так, чтобы:
1) по нажатию на пользовательскую кнопку (она называется "Отметить") у мышки пользователя менялся курсор на, допустим, прицел, и пользователь мог бы, кликнув на карту, установить на карту перемещаемую точку (Placemark). Причем, координаты точки передавались бы после ее установки в скрытые поля HTML-формы (я знаю, как это можно сделать - через DOM).
2) после ввода адреса в поле searchControl и нажатия Enter создавалась бы на карте точка (желательно тоже перемещаемая) и ее координаты также передавались бы после ее становки в скрытые поля HTML-формы.
Проблема в том, что я не знаю:
1) как добавить к пользовательской кнопке такой обработчик события onclick, который менял бы курсор на другой и после нажатия на карту ставился бы перемещаемый Placemark на месте нажатия, а не в центре карты, и координаты места нажатия передавались бы в скрытые поля HTML-формы (широта - в одно поле, долгота - в другое)?
2) как сделать так, чтобы по нажатию на один из результатов поиска, совершенного с помощью searchControl, происходило бы то же самое: на карту ставилась бы перемещаемый Placemark на месте нажатия, а не в центре карты, и координаты места нажатия передавались бы в скрытые поля HTML-формы (широта - в одно поле, долгота - в другое)?
Спасибо.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма заявки о неполадке</title>
<script src="http://api-maps.yandex.ru
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
var myMap;
function init(){
myMap = new ymaps.Map ("map", {
center: [ymaps.geolocation.latitude, ymaps.geolocation.longitude],
zoom: 12,
type: 'yandex#hybrid'
});
myMap.controls.add('typeSelector');
myMap.controls.add('zoomControl');
myMap.controls.add('scaleLine');
myMap.controls.add('miniMap');
myMap.controls.add('searchControl');
var myButton = new ymaps.control.Button({
data: {
content: 'Отметить',
title: 'Отметьте место, где существует проблема'
}
}, {
selectOnClick: false
}
);
myMap.controls.add(myButton);
myMap.events.add ('click', function (e) {
var eMap = e.get('target');// Получение ссылки на объект, сгенерировавший событие (карта).
var eCoords = e.get ('coords');
eMap.setCenter(eCoords);
eMap.geoObjects.add (new ymaps.Placemark ([eCoords],{},{draggable: true}));
}
)
}
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<p>
<form action="..." method="post" id="form1" name="form1">
<input type="hidden" name="longitude" value="">
<input type="hidden" name="longitude" value="">
...
<input type="submit" name="submit" value="отправить">
</form>
</p>
</body>
</html>