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

Пост в архиве.

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 комментариев

Авторизуйтесь, чтобы оставить комментарий

Andrey.Cjkjvfnby

28 января 2016, 06:53

Вы назначаете обработчик "#remove_pla

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

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

fastmails

28 января 2016, 06:53

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

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);

});

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

rodlex

28 января 2016, 06:53

Если не хотите создавать макет, то воспользуйтесь методом 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);
    });
});

fastmails

28 января 2016, 06:53

Спасибо!))

dimik

28 января 2016, 06:53

Вы пытаетесь навесить событие на несуществующий элемент
т.к. ваша ссылка появится только после клика на карту.

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

map.addOverlay(placemark);

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

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

fastmails

28 января 2016, 06:53

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

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

fastmails

28 января 2016, 06:53

При клике на карту - создается метка, при клике на метку - разворачивается баллун с ссылкой 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);

});

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

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

dimik

28 января 2016, 06:53

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

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

fastmails

28 января 2016, 06:53

Спасибо большое! Помогло)))

Andrey.Cjkjvfnby

28 января 2016, 06:53

Вам надо слушать у карты событие BalloonOpen

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

sir.mituschin

28 марта 2016, 21:52

Всем добрый вечер!
Есть код на 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++;
}

Maps API

29 марта 2016, 10:49

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