Клуб API Карт

Создание событий на метках в цикле и замыкания

ya.prostorobot
7 сентября 2011, 11:43

Здравствуйте!

Прошу помочь разобратся с проблемой. Предполагаю, есть недостаточное понимание как работает область видимости в js.

*** Заранее прошу прощения за неправильно оформленный код. Не вижу информации, каким тегом отмечать.

 

Краткое описание:

В цикле по известным ранее координатам, добавляю на карту метки. Задача, при щелчке на метку, переходить на другую страницу:

 


 

var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

var objManager = new YMaps.ObjectManager();
map.addOverlay(objManager);   

// points - массив, который содержит дополнительную информацию по каждой метке в том числе и координаты
for ( index in points )
{
    var point = new YMaps.GeoPoint(points[index].longitude, points[index].latitude);
    var placemark = new YMaps.Placemark(point, {style: style, hasHint:true, hasBalloon:false});

    // Добавляем обработчик на каждую метку, чтобы при клике осуществляляся переход
    YMaps.Events.observe(placemark, placemark.Events.Click, function () {
        // Проблема в этом месте.
        // index всё время равен последнему элементу массива points.
        // В итоге получается, что ссылка на любую метку одна и таже.
        document.location.href = points[index].link;         
    });
}
 

 

5 комментариев
Подписаться на комментарии к посту

 

Заранее прошу прощения за неправильно оформленный код. Не вижу информации, каким тегом отмечать.
В редакторе поста есть кнопка "врезка" туда и надо убрать код (подробнее)

 

 

В итоге получается, что ссылка на любую метку одна и таже.

 

Использовать замыкания и не использовать for in для массивов

 

Спасибо большое за быстрый ответ.

Поискал информацию на эту тему. Это стандартная проблема с циклами, если не знаешь как использовать замыкания.
Попробовал вот такой вариант, но он не работает: 

// points - массив, который содержит дополнительную информацию по каждой метке в том числе и координаты
for ( index in points )
{
     var point = new YMaps.GeoPoint(points[index].longitude, points[index].latitude);
     var placemark = new YMaps.Placemark(point, {style: style, hasHint:true, hasBalloon:false});

    // Добавляем обработчик на каждую метку, чтобы при клике осуществляляся переход
    (function(index) {
       YMaps.Events.observe(placemark, placemark.Events.Click, function () {       
            document.location.href = points[index].link;         
       }
    })(index);
}

 

Не подскажите в чем проблема может быть проблема?

Поставьте себе какой-нибудь js-отладчик (например firebug) 

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

Спасибо большое!

Есть firebug и хромовский отладчик. 

Рабочий пример:

 

(function(index) {
        YMaps.Events.observe(placemark, placemark.Events.Click, function () {       
             document.location.href = points[index].link;         
        });
})(index);

 

А так не будет работать?

for index in array {

....

var link = array[index].link;

YMaps.event.observer(p, click, function(alert(link)));

}

или можно еще веселее сделать placemark.link =  array[index].link тогда ссылка будет доступна вместе с точкой.