Клуб API Карт

Навешивание событий на Placemark

Пост в архиве.
kolka-the-hackfaq
12 апреля 2010, 17:27

 

навешиваю события примерно так:

for(int i=0;i<N;i++)

{

var marker = markers[i];

map.addOverlay(marker);

YMaps.Events.observe(marker, marker.Events.Click, markerClicked);

}

 


в итоге при клике по маркеру получаю N событий клика того маркера, по которому кликнул, в чем может быть проблема и как её решить?


 

function markerClicked(marker, event)

            {

пока решил так:

 

                if(selectedMarker==marker)

                    return false;

                 selectedMarker = marker; 

                alert(marker.title);


 

}

но чувствую, что я чего-то недопонимаю.

 

9 комментариев
Вынесите создание обработчика в функцию:
for(var i = 0; i < N; i++) {
    map.addOverlay(marker[i]);
    addListener(markers[i])
}

function addListener (marker) {
    YMaps.Events.observe(marker, marker.Events.Click, markerClicked);
}
не помогло
так тоже делал. у меня маркеры без балуна. видимо где-то в другом ошибка
var ICON = new YMaps.Style(); ICON.iconStyle = new YMaps.IconStyle(); ICON.iconStyle.href = "/images/markers/ex-one.png"; ICON.iconStyle.size = new YMaps.Point(24, 39); ICON.iconStyle.shadow = new YMaps.IconShadowStyle(); ICON.iconStyle.shadow.href = "/images/markers/shadow.png"; ICON.iconStyle.shadow.size = new YMaps.Point(31, 39); ICON.iconStyle.shadow.offset = new YMaps.Point(-7, -28);
var options = { draggable: false, cursor: 'pointer', interactive: { style: YMaps.Interactivity.INTERACTIVE } }; this.setOptions(options);
Вы немного напутали при задании опций. Нужно вот так:
var options = {
    draggable : false,                                              // Это опция по умолчанию (ее можно не указывать)
    cursor : YMaps.Cursor.POINTER,                      // Используйте лучше наши константы
    interactive : YMaps.Interactivity.INTERACTIVE,   // interactive - не объект
    style : ICON                                                     // Стиль
};
А можете дать ссылку на страницу?
на локальном компьютере, а наржу никак не могу выкинуть
у меня последний добавленый маркер работает так, как надо, остальные, если им явно курсор не выставить имеют курсор рука. при клике по любому получаю N событий...
var markers =[];

markers.push(new RltMarker(new YMaps.GeoPoint(37.517109,55.805068), {title: "TITLE1",count:1,clickable:true,interactive:true,ids:[497494]}));
        markers.push(new RltMarker(new YMaps.GeoPoint(37.508010,55.617381), {title: "TITLE2",count:2,clickable:true,interactive:true,ids:[433341,475106]}));
        markers.push(new RltMarker(new YMaps.GeoPoint(37.816788,55.715983), {title: "TITLE3",count:2,clickable:true,interactive:true,ids:[445530,475116]}));




function loadMap()
            {
                map = new YMaps.Map(YMaps.jQuery("#map")[0]);
                
                map.setCenter(new YMaps.GeoPoint(105.318756,61.52401), 6);
            
                map.addControl(new YMaps.Zoom());
                YMaps.Events.observe(map, map.Events.MoveStart, function() {if (markerPopupOpened) closeMarkerPopup(); } );
                populateMarkers();
                
                if (markers.length > 0)
                {
                    var points=[];
                    for(var i=0;i
                    {
                        points.push(markers[i].getGeoPoint());
                        map.addOverlay(markers[i]);
                        addListener(markers[i])
                    }
                    map.setBounds(new YMaps.GeoCollectionBounds(points));
                }
            }


function addListener(marker)
            {
                YMaps.Events.observe(marker, marker.Events.Click, function(){ alert('a'); });
//  в итоге получаю при клике по одному вызовы для каждого
            }


вот js 
var RLT_ICON;

function initRltIcon() {
RLT_ICON = new YMaps.Style();
RLT_ICON.iconStyle = new YMaps.IconStyle();
RLT_ICON.iconStyle.href = "/images/markers/ex-one.png";
RLT_ICON.iconStyle.size = new YMaps.Point(24, 39);
RLT_ICON.iconStyle.shadow = new YMaps.IconShadowStyle();
RLT_ICON.iconStyle.shadow.href = "/images/markers/shadow.png";
RLT_ICON.iconStyle.shadow.size = new YMaps.Point(31, 39);
RLT_ICON.iconStyle.shadow.offset = new YMaps.Point(-7, -28);




}




RltMarker.prototype = new YMaps.Placemark(new YMaps.GeoPoint(0, 0));
// RltMarker
function RltMarker(lnglat, opt_opts) {


this.isSel = false;
this.setGeoPoint(lnglat);
this.title = opt_opts.title;
this.ids = opt_opts.ids;
this.count = opt_opts.count;
this.setStyle(RLT_ICON);
if (typeof opt_opts != 'undefined') {
var options = {
hasBalloon:false,
draggable: opt_opts.draggable ? true : false,
cursor: opt_opts.clickable ? YMaps.Cursor.POINTER : YMaps.Cursor.GRAB,
interactive:opt_opts.clickable ? YMaps.Interactivity.INTERACTIVE : YMaps.Interactivity.NONE
};
}
this.setOptions(options);





}


Я немного изменил ваш код, сейчас думаю, что все должно работать:
// Создаем группу для хранения меток
var markers = new YMaps.GeoObjectCollection("rtl#main");

// Добавляем метки
markers.add([
    RltMarker(new YMaps.GeoPoint(37.517109,55.805068), {title: "TITLE1",count:1,clickable:true,interactive:true,ids:[497494]}),
    RltMarker(new YMaps.GeoPoint(37.508010,55.617381), {title: "TITLE2",count:2,clickable:true,interactive:true,ids:[433341,475106]}),
    RltMarker(new YMaps.GeoPoint(37.816788,55.715983), {title: "TITLE3",count:2,clickable:true,interactive:true,ids:[445530,475116]})
]);

function loadMap () {
    var map = new YMaps.Map(YMaps.jQuery("#map")[0]);
    map.setCenter(new YMaps.GeoPoint(37.517109, 55.805068), 10);
   
    // Создаем стиль и добавляем его в хранилище
    YMaps.Styles.add("rtl#main", {
        // Значок
        iconStyle : {
            href : "/images/markers/ex-one.png",
            size : new YMaps.Point(24, 39)
        },
       
        // Тень значка
        iconShadowStyle : {
            href : "/images/markers/shadow.png",
            size : new YMaps.Point(31, 39),
            offset : new YMaps.Point(-7, -28)
        }
    });

    // Добавляем метки на карту
    map.addOverlay(markers);

    // Границы отображения объектов
    var bounds = new YMaps.GeoCollectionBounds();
   
    // Обработка объектов
    markers.forEach(function (obj) {
        YMaps.Events.observe(obj, obj.Events.Click, function (obj) {
            alert(obj.name);
        });
        bounds.add(obj.getGeoPoint());
    });

    map.setBounds(bounds);
}

// Функция для создания метки
function RltMarker (geoPoint, options) {
    // Создаем метку с нужными опциями
    var placemark = new YMaps.Placemark(geoPoint, {
        draggable : options.draggable || false,
        interactive : (options.interactive) ? YMaps.Interactivity.INTERACTIVE : YMaps.Interactivity.NONE
    });

    // Задаем контент
    placemark.name = options.title || "";
    placemark.id = options.id || -1;
   
    // Дополнительный контент мы рекомендуем размещать в поле metaDataProperty
    placemark.metaDataProperty = {
        isSel : false,
        count : options.count || -1
    }

    return placemark;
}
Немного комментариев:
1. Вы неправильно отнаследовались от YMaps.Placemark. В частности не вызвали родительский конструктор. Пример наследования можно посмотреть в этом примере. Я заменил ваш класс на функцию.
2. Лучше стиль добавить в хранилище. Тогда к нему можно будет обращаться по ключу даже до его создания.
3. Все метки можно добавить в группу, тогда можно задать единый стиль всем ее объектам сразу. И обойти все объекты можно будет с помощью метода forEach.

Если появятся еще вопросы - спрашивайте.