Клуб API Карт

События и метки

fastmails
8 ноября 2010, 13:23

Недавно начал изучать яндекс карты, и столкнулся с такой проблемой. Создаю метку, при клике на карте. В самой метке есть ссылка с  id = remove_placemark.

Пытаюсь сделать событие click, для этой ссылки:

 

YMaps.jQuery("#remove_placemark").click(function(){
      alert('qwe');
});

 

Но оно не срабатывает. Подскажите, пожалуйста, почему. В мануалах, не нашел решение проблемы((

Весь код целиком:

 

 
YMaps.jQuery(function ()
{
               var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
                map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

                var placemark;
                var myEventListener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent)
                {
                        placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {
                                draggable: true
                        });

                        placemark.name = "Имя метки";
                        placemark.description = '<a id = "remove_placemark" href="#">Удалить</a>';
                        placemark.setBalloonOptions({
                                maxWidth: 200
                        });

                        map.addOverlay(placemark);
                        myEventListener.cleanup();
                }, this);

                YMaps.jQuery("#remove_placemark").click(function(){
                       alert('qwe');
                });
});
 

 

12 комментариев
Подписаться на комментарии к посту
Вы назначаете обработчик "#remove_pla

cemark" после того как назначили обработчик для клика по карте. В этот момент метка еще не созданна.


Перенесите этот обработчик в колбэк клика по карте, после создания метки.

Если я  правильно Вас понял, то нужно так:

YMaps.jQuery(function ()
        {

                // Создает экземпляр карты и привязывает его к созданному контейнеру
                var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

                // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
                map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

                //Создаем метку
                var placemark;

                //Гео кодер
                var geocoder = new YMaps.Geocoder("Москва");


                var myEventListener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent)
                {
                        placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {

                                draggable: true

                        });

                        placemark.name = "Имя метки";
                        placemark.description = 'Удалить';

                        placemark.setBalloonOptions({
                                maxWidth: 200
                        });

                        map.addOverlay(placemark);
                       
                        myEventListener.cleanup();
                


                        YMaps.jQuery("#remove_placemark").click(function(){
                                alert('qwe');
                        });


               }, this);
      
  });


Такой вариант не сработает. Метка уже создана, а вот с содержимое ее нет. При клике на метку, лишь создается нужная мне ссылка.
Как правильно перехватить этот момент?
Если не хотите создавать макет, то воспользуйтесь методом setContent().

Примерно так:

YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID"));
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

    var points = new YMaps.GeoObjectCollection();    map.addOverlay(points);                                                                                                                                                     

    YMaps.Events.observe(map, map.Events.Click, function (map, e) {
        var placemark = new YMaps.Placemark(e.getGeoPoint(), { draggable : true });

        var content = YMaps.jQuery('удалить')
                .bind("click", function () {
                    if (confirm("Вы уверены?")) {
                        points.remove(placemark);
                    }
                    return false;
                });
        placemark.setBalloonContent(content[0]);

        points.add(placemark);
    });
});
Спасибо!))
Вы пытаетесь навесить событие на несуществующий элемент
т.к. ваша ссылка появится только после клика на карту.

Можете перенести ваш код выше в обработчик клика
под строчку

map.addOverlay(placemark);


или повесить его через jQuery.live.

А еще лучше реализовать свой макет метки
и навесить в нем все нужные обработчики






через jQuery.live. так же не работает ((

Насчет макета, спасибо. Но мне хочется разобраться, почему такой топорный вариант даже не работает пока.
При клике на карту - создается метка, при клике на метку - разворачивается баллун с ссылкой id =  remove_placemark.

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

Пример:

YMaps.jQuery(function ()
        {

                // Создает экземпляр карты и привязывает его к созданному контейнеру
                var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

                // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
                map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

                //Создаем метку
                var placemark;

                //Гео кодер
                var geocoder = new YMaps.Geocoder("Москва");



                var myEventListener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent)
                {
                        placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {

                                draggable: true

                        });

                        placemark.name = "Имя метки";
                        placemark.description = 'Удалить';

                        placemark.setBalloonOptions({
                                maxWidth: 200
                        });

                        map.addOverlay(placemark);
                       
                        myEventListener.cleanup();
                                     
                              
                     
                        placemark.openBalloon();


                        alert($('#remove_placemark').size());


                }, this);
      
  });


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

Как это правильно сделать, используя апи, подскажите пожалуйста?

 
Такой вариант не сработает. Метка уже создана, а вот с содержимое ее нет. При клике на метку, лишь создается нужная мне ссылка.
Как правильно перехватить этот момент?


Ах да, я проглядел. Ваша ссылка будет в балуне.
Вам надо слушать у карты событие BalloonOpen
и там вешать обработчик
Спасибо большое! Помогло)))
 
Вам надо слушать у карты событие BalloonOpen

Событие метки!!!
Всем добрый вечер!
Есть код на HTML, который отображает карту и добавляет метку. До очередного обновления все исправно работало. После обновления перестала работать функция постановки метки по клику на карту.
вот,что есть
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://api-maps.yandex.ru/2.1.34/?&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
var index = 1;
var MyMap, route;
var clusterer;
var PointArray = [];
var noclick = false;

ymaps.ready(init);
function init(){
myMap = new ymaps.Map ("map", {
center: [55.75, 37.62],
zoom: 12
});
myMap.behaviors.enable('scrollZoom');
myMap.behaviors.disable('dblClickZoom');



myMap.events.add('click', function (e) {
if (!noclick) {
addMarker(e.get('coordPosition'));

}else{
noclick = false;
}
});

myMap.events.add('drag end', function (e) {
noclick = true;
document.getElementById('CoordX').value = "0";
document.getElementById('CoordY').value = "0";
});

// создадим кластеризатор и запретим приближать карту при клике на кластеры
clusterer = new ymaps.Clusterer({clusterDisableClickZoom: true, synchAdd: true});
myMap.geoObjects.add(clusterer);
}

function addMarker(coordPosition){
myPlacemark = new ymaps.Placemark(coordPosition, {
// Свойства
// Текст метки
iconContent: 'Точка'+index
}, {
// Опции
// Иконка метки будет растягиваться под ее контент
preset: 'twirl#blueStretchyIcon'
});
myMap.geoObjects.add(myPlacemark);

document.getElementById('CoordX').value = coordPosition[0].toPrecision(15);
document.getElementById('CoordY').value = coordPosition[1].toPrecision(15);
index++;
}
sir.mituschin,
Здравствуйте, во-первых, у Вас подключена конкретная минорная версия API 2.1.34, то есть выход новых версий API не может повлиять на Ваш код, во-вторых, Вы используете API 2.1, но подключаете пресет twirl#blueStretchyIcon из версии 2.0.
Исправьте код и выложите пример на jsfiddle или дайте ссылку на страницу, как Вас попросили здесь: https://yandex.ru/blog/mapsapi/ne-rabotayu-metki-po-kliku-na-kartu