Клуб API Карт

Обновление ContentBody в Сlusterer с одними координатами.

Spavel74
5 сентября 2012, 15:06

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

Создаю GeoObject - type: "Point"  с использованием clusterer.

На Point добавлен ret.events.add('click', onClickPoint);

 

Координаты некоторых точек совпадают и сливаются в один кластер. При нажатии на такой кластер = таблица с левой стороны с заголовками balloonContentHeader, с правой  balloonContentBody.

 

Скажите как заставить обновлять контент для balloonContentBody ?

function NewYmaps_GeoObject(coordinatesX , coordinatesY, idbase, arrData)
{
  //headdata="Вторичное жилье||Квартира||Сдам в аренду||Одна комнатная||home_7294.png"
  var It_hintContent =  arrData[2] + ' - ' + arrData[1];
  if(arrData[3] != '-')
  {
    It_hintContent = It_hintContent + ', ' + arrData[3];
  }
  var ret = new ymaps.GeoObject(
  {
        geometry:
        {
            type: "Point",
            coordinates: [coordinatesX, coordinatesY]
        },
        properties:
        {
            hintContent: It_hintContent,
            balloonContentHeader: arrData[1],
            balloonContentBody: "",
            idbase: idbase
            /*iconContent: "2"     */
        }
   },
   {
      hideIconOnBalloonOpen: true,
      iconImageHref: '/declare/images/map/home/' + arrData[4],
      iconImageSize: [35, 35]
   }
   );
   ret.events.add('click', onClickPoint);
   return ret;
}
function onClickPoint(e)
{
/*
  var PointeMark = e.get('target'),
      map = PointeMark.getMap(), // Ссылка на карту.
      bounds = PointeMark.getBounds(), // Область показа карты.
      idbase = PointeMark.properties.get('idbase'); // Получаем данные для запроса из свойств метки.
      alert(idbase);
*/
   var PointeMark = e.get('target');
   idbase = PointeMark.properties.get('idbase'); // Получаем данные для запроса из свойств метки.
   //alert(idbase);
       var serverAdress = '/declare/js/ajax_map_infodeclare.php';
        //alert(valobj);
        _valobj = encodeURIComponent(idbase);
        pushPOST = 'ValObj=' + _valobj;
        var xml_doc = jQuery.ajax({
  type: "POST",
  url: serverAdress,
                      cache: false,
  data: pushPOST,
                      dataType: "html",
                      timeout: 3000,
                      async: false,
                      beforeSend: function(){
                                               PointeMark.properties.set('balloonContentBody', '<div class="MapContentBodyProcess"><div class="ProcessLoad"></div></div>');
                                            },
      success: function(xml_doc){
                                                  PointeMark.properties.set('balloonContentBody', xml_doc);
                                                }
    });
}

 var myGeoObjects = [];
var l1 = ymaps.templateLayoutFactory.createClass('$[properties.balloonContentBody]');
var l2 = ymaps.templateLayoutFactory.createClass('');
ymaps.layout.storage.add('my#Pointe_Body', l1);
ymaps.layout.storage.add('my#Pointe_Header', l2);
for (var i = 0; i<coords.length; i++) {
  myGeoObjects[i] = NewYmaps_GeoObject(coords[i][0], coords[i][1], coords[i][2], coords[i][3]);
}
var clusterIcons = [{
                href: '/declare/images/map/find.png',
                size: [53, 53],
                // Отступ, чтобы центр картинки совпадал с центром кластера.
                offset: [-20, -20]
            },
            {
                href: '/declare/images/map/find.png',
                size: [63, 63],
                offset: [-30, -30]
            }
        ];
        // При размере кластера до 100 будет использована картинка 'small.jpg'.
        // При размере кластера больше 100 будет использована 'big.png'.
// Создадим кластеризатор и  приближать карту при клике на кластеры.
clusterer = new ymaps.Clusterer();
clusterer.options.set({
    disableClickZoom: false,
    synchAdd: false,
    icons: clusterIcons,
    numbers: [100],
    balloonContentBodyLayout:'my#Pointe_Body',
    balloonContentHeaderLayout:'my#Pointe_Header'
});
clusterer.add(myGeoObjects);
myMapList.geoObjects.add(clusterer);

 

 

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

Может быть вам поможет пример в обсуждении?

При использование этого Макета таблица кластера уходит за границы карты. 

Нашол код

clusterer.events.add('balloonopen', function (e) {

var geoObjects=[];

    var cluster = e.get('target'),

    geoObjects = cluster.properties.get('geoObjects');

    if(geoObjects)

    {

      geoObjects.forEach(function(index, i){

                  (function (currentGeoObject) {

                            var idbase = currentGeoObject.properties.get('idbase');

                              // jQuery.ajax({

                    })(index);

                  });

    }


});


Получилось при нажатии обновлять balloonContentBody

Первый элемент при загрузке остаётся пустым