Клуб API Карт

Редактирование внешнего вида метки через ее балун.

Andrey.Cjkjvfnby
10 сентября 2010, 09:57

Решил поделиться реализацией такой задачи:

Редактирование метки через ее балун. (Чем то напоминает создание метки в http://maps.yandex.ru/)

Алгоритм прост:

  • Создаем собственный макет метки.
  • Добавляем обработчик клика по метке: В нем нужным элементам макета с помощью jQuery добавляем обработчики событий.
  • Добавляем обработчик события для закрытия балуна: Перерисовка метки.

В результате при закрытии метки внешний вид балуна меняется.

Чтобы при нажатии кнопки  + - редактирование не прикращалось в обработчике события иммитируем клик по балуну. (при этом старый балун закрывается, вызывая событие и новый перерисовывается.)

Из наблюдений: При вызове метода update обработчики событий у элементов внутри балуна скидываются, поэтому балун приходится переоткрывать.

Попутно созрел вопросы разработчикам:

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

И второй вопрос не совсем по теме: При закрытии балуна удаляются ли обработчики событий его дом элементов из памяти?


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
 
1 комментарий
Подписаться на комментарии к посту
Также по теме можно почитать еще статью в нашем блоге по созданию простого редактора меток: http://ymapsapi.ya.ru/replies.xml?item_no=15

А теперь ответ на ваш вопрос. Сейчас нельзя сделать один общий обработчик для всей группы, поэтому выходом из ситуации может послужить создание обработчиков у группы на события Add и Remove. При генерации этих событий создавайте нужный обработчик для каждого из добавляемых объектов и удаляйте их соответственно.

Спасибо за ваше пожелание, мы его обязательно учтем.