Решил поделиться реализацией такой задачи:
Редактирование метки через ее балун. (Чем то напоминает создание метки в http://maps.yandex.ru/)
Алгоритм прост:
- Создаем собственный макет метки.
- Добавляем обработчик клика по метке: В нем нужным элементам макета с помощью jQuery добавляем обработчики событий.
- Добавляем обработчик события для закрытия балуна: Перерисовка метки.
В результате при закрытии метки внешний вид балуна меняется.
Чтобы при нажатии кнопки + - редактирование не прикращалось в обработчике события иммитируем клик по балуну. (при этом старый балун закрывается, вызывая событие и новый перерисовывается.)
Из наблюдений: При вызове метода update обработчики событий у элементов внутри балуна скидываются, поэтому балун приходится переоткрывать.
Попутно созрел вопросы разработчикам:
Можно ли для группы или коллекции метод задать бщий обработчик события или необходимо данную операцию проделывать с каждой меткой?
И второй вопрос не совсем по теме: При закрытии балуна удаляются ли обработчики событий его дом элементов из памяти?
l1/DTD/xhtml1-transitiona ">l.dtd
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://api-maps.yandex.ru/1.1/index.xml?key= Вашключ" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$ = jQuery = YMaps.jQuery // делаем шоткат для jQuery
// Весь функционал задается внутри события загрузки карты.
$(document).ready(function() {
//init map
map = new YMaps.Map($("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(30,59),14);
// создаем стиль с использование шаблона
var aStyle = new YMaps.Style();
aStyle.iconStyle = new YMaps.IconStyle(new YMaps.Template(
"<div style='font-size:$[w]px;'>$[name]</div>"));
//create placemark
mark = new YMaps.Placemark(map.getCenter(),{style: aStyle,hideIcon: false,
hasBalloon: false, balloonOptions: {
hasCloseButton: true,mapAutoPan: false}
}); // end mark
// Параметры метки для отображения в шаблоне
mark.name = "Кликни меня!";
mark.w = 60; // размер метки
mark.description = '<textarea id="icontext"></textarea><br />' +
'<input type="button" value="+" id="markPlus" title="Увеличить"/>' +
'<input type="button" value="-" id="markMinus" title="Уменьшить"/>'
YMaps.Events.observe(mark, mark.Events.Click, function(placemark){
// открываем балун
placemark.openBalloon();
// заполняем текстовое поле в балуне
$("#icontext").val(placemark.name);
// добавляем обработчики события на кнопки:
// увеличить размер
$("#markPlus").click(function(){
mark.w = mark.w + 2;
YMaps.Events.notify(mark, mark.Events.Click, mark);
})
// уменьшить размер
$("#markMinus").click(function(){
mark.w = mark.w - 2;
YMaps.Events.notify(mark, mark.Events.Click, mark);
})
}) //end mark.click
// Listener balloon close
YMaps.Events.observe(mark, mark.Events.BalloonClose, function(placemark){
placemark.name = $("#icontext").val();
placemark.update();
})
// add mark to map
map.addOverlay(mark);
})
</script>
</head>
<body>
<div style="width:480px; height:320px;" id="YMapsID"></div>
</body>
</html>