Клуб API Карт

Как открыть балун кластера

divined
26 октября 2014, 17:08

В этом вопросе скрывается целых три:

 

1. Собственно как открыть?

http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/objectManager.ClusterCollection.xml - тут есть пример

Пример: // Откроем балун кластера с нужным выбранным объектом. var objectState = objectManager.getObjectState(myObjects[i]); if (objectState.isClustered) { objectManager.clusters.state.set('activeObject', myObjects[i]); objectManager.clusters.balloon.open(objectState.cluster.id); }

Однако:

TypeError: objectManager.clusters.balloon is undefined  -  objectManager.clusters.balloon.open(objectId);
2. Как узнавать когда открывать балун, а когда нет и позволить изменить масштаб карты.
3. Как загружать результат? Т.е. у нас есть набор объектов внутри кластера, и если нам нужно вывести (например аккордеон), то нам нужно загрузить балуны для всех объектов внутри и затем открыть балун кластера? Или загрузить уже готовый бален для кластера?
3 комментария
Подписаться на комментарии к посту

1. У нас есть рабочий пример в песочнице - http://api.yandex.ru/maps/jsbox/2.1/object_manager_balloon

Посмотрим, что там за беда с примером в документации

2. Что вы имеете в виду? Встроенная логика такая - ловим клик на кластере, смотрим, какой у карты максимальный зум, если можно еще зазумиться, то зумимся - иначе открываем балун. Вы хотите это же реализовать или что-то свое сделать?

3. В песочнице есть пример как подгружать данные по требованию для метки. Для кластера все аналогично - нужно только загрузить данные для меток в составе кластера и записать данные в кластер и метки http://api.yandex.ru/maps/jsbox/2.1/object_manager_balloon_async

Поясните, пожалуйста, по 3му пункту. Ведь в отличие от метки, у кластера нет события клик, есть только балунопен. А когда балун уже опен, то балуны меток подгружать по идее поздно. Тестирование ниже приведенного кода это подтверждает (хотя, может быть, я в коде что-то напутала...) У меня балун открывается пустой.

ymaps.ready(init);
function init () {
  var myMap = new ymaps.Map('map', {
      center: [44.88564041463957,37.319950461387634],
      zoom: 5,
      controls: ['fullscreenControl', 'rulerControl', 'typeSelector', 'zoomControl']
  }, { autoFitToViewport: 'always'});
  myMap.behaviors.disable('scrollZoom');
 
  var list = ymaps.templateLayoutFactory.createClass([
      '',
      '{% for geoObject in properties.geoObjects %}',
          '{{ geoObject.properties.balloonContent|raw }}',
      '{% endfor %}',
      ''
  ].join(''));
 
  var clusterer = new ymaps.Clusterer({
      preset: 'islands#invertedBlueClusterIcons',
      groupByCoordinates: false,
      clusterDisableClickZoom: true,
      clusterOpenBalloonOnClick: true,
      clusterBalloonPanelMaxMapArea: 0,
      clusterBalloonMaxHeight: 300,
      clusterBalloonContentLayout: list
  });
 
  var marker = [];
  marker[536924] = new ymaps.Placemark([44.8833333, 37.3166667], {   
    myID: 536924,
    balloonContentBody: ''
  }, {   
    iconLayout: 'islands#blueDotIcon'
  });
  clusterer.add(marker[536924]);
  marker[536927] = new ymaps.Placemark([44.863043, 37.380112], {   
    myID: 536927,
    balloonContentBody: ''
  }, {   
    iconLayout: 'islands#blueDotIcon'
  });
  clusterer.add(marker[536927]);
  marker[536929] = new ymaps.Placemark([44.8710903881978, 37.3340710226646], {   
    myID: 536929,
    balloonContentBody: ''
  }, {   
    iconLayout: 'islands#blueDotIcon'
  });
  clusterer.add(marker[536929]);
          
  clusterer.events.add('balloonopen', function (e) {
    var cluster = e.get('cluster');
    var placemarks = cluster.getGeoObjects();
    var ids = [];
    $.each(placemarks, function(i, placemark) {
      if(placemark.properties.get('balloonContentBody').length == 0) {
        ids.push(placemark.properties.get("myID"));
      }
    });
    if(ids.length) {
      $.ajax({
              url: "/objectballoon",
              type: 'post',
              data: 'ids='+ids.join(',')
          }).done(function(result) {
              var json = $.parseJSON(result);
        if(Object.keys(json).length > 0) {           
              $.each(json, function(i, point) {
            marker[i].properties.set({
              balloonContentBody: point
            });
              });                          
        }
          });  
    }              
  });
                                
  myMap.geoObjects.add(clusterer);   
  myMap.setBounds(clusterer.getBounds(), {
      checkZoomRange: true
  });
}

Список меток приведен для примера, меток намного больше и кластеризовать их необходимо.

У кластера есть событие click