Клуб API Карт

Динамическая загрузка контента в балун

stop-avto24
2 июня 2014, 23:09

Здравствуйте! C api Яндекс карт дело имею совсем недавно. В общем стояла задача вывести все объекты на карту и динамически подгружать содержимое в их балуны. С этим разобрался. Теперь добавил кластеризацию объектов и никак не могу понять как повесить событие открытия балуна на объектах, находящихся в кластере.

Без кластера делал вот так:

myGeoObjects.each(function(pm){
    // Тут много кода. Если коротко:

   // При открытии балуна объекта вычислял содержимое метки (iconContent) этого объекта, он же id объекта в бд

  // Отправлял Ajax запрос для получение контента из бд для этого объекта и показывал его в балуне

}

А с кластером не могу понять как повесить событие на открытие балуна.

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

Дело в том, что в примере контент для балуна прописывается заранее. Если брать этот пример, то мне нужно чтоб контент подгружался только в этих случаях:

1. При клике на кластер (так как при клике на кластер автоматически открывается и балун первой метки в этом кластере. Вот в балун этой метки нужно подгрузить контент)

2. Когда пользователь переходит на другой объект, используя открытый балун кластера.

В общем просто не могу понять как отследить событие клика по объекту, который находится в кластере

подгружайте контент для всех меток в кластере,

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

В общем решил что лучше бросить эту затею с динамической загрузкой содержимого балуна.

Думаю лучше в этом случае загрузить все нужные данные из бд и добавить объекты уже с имеющимися данными.

Вот только объектов может быть за 1000. В связи с этим возникает новый вопрос. Что лучше? Кластеризация или слои активных областей?

И вообще как лучше писать код для добавления объектов, если сам js генерится с помощью php (в цикле, в зависимости от количества объектов)

Если так, то код просто мега огромный будет)

foreach($objects as $object) {
                if(!$i) $i=0;
                $script.= '
                    myGeoObjects['.$i.'] = new ymaps.GeoObject({
                        geometry: {type: "Point", coordinates: ['.$object['coords'].']},
                        properties: {
                            clusterCaption: "Объект №_'.$object["id"].'",
                            balloonContentBody: "'.      $object["description"]     .'",
                            iconContent: '.$object["id"].'
                        }
                    });';
                  
                    $i++;
            }

 

 
 если сам js генерится с помощью php

как раз так делать не нужно.

данные должны передаваться например в формате JSON и кешироваться браузером

Если я правильно вас понял, то myGeoObjects это кластеризатор.

Тогда у каждой метки должно быть некое свойство по которому мы должны определять что именно нам надо загрузить. У меня это

geoObject.properties.get('id').

тогда на кластеризатор мы вешаем событие:

PrimaryCollection.events.add('click',function(e){//можно повесить на balloonopen, это уже зависит от особенностей реализации

            var id= e.get('target').properties.get('id'),

                objects;

            if(id!=undefined){

                тут загрузка балуна геообъекта;

            }

            else{

                objects=e.get('target').properties.get('geoObjects');

                for(var i in objects){

                   тут загрузка балуна геообъекта, или если не хотите много запросов, то вместо цикла напишите функцию для получения всех нужных балунов одним запросом;

                }

            }

 

Вот примерная реализация

http://jsfiddle.net/rx3LF/1/

Всем спасибо за ответы. Пошел по пути JSON. Единственный вопрос который остался - это выдержит ли в итоге такая реализация если объектов будет 1000-1500 и каждого свой балун с ифной (инфа загружется сейчас не динмичеси при клике на балун, а сразу для всех объектов при загрузке страницы)