Клуб API Карт

Открытие балуна для динамических данных

kenigan
19 апреля, 23:09

Здравствуйте. Стоит следующая задача: имеется фильтр на сайте, при его изменении должны меняться метки на карте (подгружаться из БД элементы, соответствующие фильтру). Данные получаю, возникает проблема с метками. Сами метки правильно наносятся на карту, но при клике на них неверно отрабатывает балун, не срабатывает событие с передачей параметра.  Загвостка в том, что содержимое балуна должно подгружаться на  аяксе . То есть при клике на метку должен передаваться параметр (id элемента в БД) в балун и подгружаться данные. В качестве параметра я взял свойство description для метки. Пытаюсь сделать таким образом (все переменные приходят правильные, проверял)

// Получаю данные фильтра
$.post("ajax_filter.php", { параметры }).success(function(data) {
            var result = JSON.parse(data);

                // Добавляем метки на карту
                var geoObjects = [];
                for (var i = 0; i < result.length; i++) {
                    var myPlacemark = new ymaps.Placemark([result[i].shirota, result[i].dolgota], {
                        hintContent: result[i].name,
                        balloonContent: '<div class="loading">Идет загрузка данных...</div>'
                    }, {
                        balloonLayout: MyBalloonLayout,
                        balloonContentLayout: MyBalloonContentLayout,
                        balloonPanelMaxMapArea: 0,
                        hideIconOnBalloonOpen: false,
                        balloonOffset: [0, -15],
                        openEmptyBalloon: true,
                        iconColor: result[i].marker_color,
                        iconLayout: 'default#image',
                        iconImageHref: result[i].marker_img,
                        iconImageSize: [42, 46],
                        iconImageOffset: [-21, -23]
                    });
                    myPlacemark.description = result[i].id;
                    myPlacemark.events.add('balloonopen', function (e) {
                        $.post("ajax_take_content_ballon.php", {
                            id: myPlacemark.description
                        }).success(function(data) {
                            myPlacemark.properties.set('balloonContent', data);
                        });
                    });
                    geoObjects[i] = myPlacemark;
                    myMap.geoObjects.add(myPlacemark);
                }
                clusterer.add(geoObjects);
                myMap.setBounds(clusterer.getBounds(), {
                    checkZoomRange: true
                });
            }
        });

Когда же я просто загружаю страницу, то использую практически такой же код, только там идёт комбинация с php кодом и маркеры задаются там таким образом

var myPlacemark_<?=$i;?> = new ymaps.Placemark(...), то есть динамические имена задаются, и маркеры с балунами отрабатывают верно. Как можно решить эту задачу без php?

3 комментария
У всех похапе-мастеров одна и та же проблема с пониманием асинхронности и замыканий в javascript.
Внутри обработчика balloonopen ссылка myPlacemark будет всегда указывать на последний объект в массиве.
Используйте делегирование событий и не надо эти циклы лепить, тем более если не понимаете как они работают
А эти  "динамические имена" – совсем дно, уже в школе учат - не печатайте конструкции одного языка из другого.  Передавайте данные в JSON определенного формата, который можно сразу добавить на карту без циклов.

Обновлено 20 апреля, 05:19
Спасибо за ответ) Пробую сделать JSON, чтобы сразу на карту без циклов добавлять данные. Возникла одна трудность. Все метки добавляются, но при клике не открывается baloon. Я создал свой шаблон балуна (код отсюда https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan), и задаю свойства в php таким образом


$result["features"][$counter]["options"]["balloonLayout"] = "MyBalloonLayout";
$result["features"][$counter]["options"]["balloonContentLayout"] = "MyBalloonContentLayout";

Если удалить 2 эти строки, то балуун появляется при клике, но стандартный, не визуализированный шаблон. Не подскажите, в чем может быть проблема? 
Нашел ответ для себя тут
https://yandex.ru/blog/mapsapi/56661
Благодарю, dimik))