Клуб API Карт

атрибуты элемента или элементов в кластере

Пост в архиве.

здравствуйте,

Подскажите пожалуйста как получить атрибуты точки или точек в кластере по событию?

Мой код создает карту и кластеризатор, берет массив координат, создает из них точки с параметром ID, отображает кластером на карте

Открытие дефолтного балуна отключено, нужно по клику в точку или кластер получать его / их ID и обрабатывать (динамически подгружать фотографии) внутри другого div (под картой)

 



ymaps.ready(init);
var myMap;
var myPlacemark;


function init () {
myMap = new ymaps.Map('ymap', {
center: [40, 60],
zoom: 3,
type: "yandex#map"
});

myMap.controls.add("zoomControl");



// http://api.yandex.ru/maps/doc/jsapi/2.x/dg/concepts/geoobjects.xml#clusters



var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
gridSize: 100,
openBalloonOnClick: false,
balloonWidth: 300,
balloonHeight: 200,
balloonSidebarWidth: 100
});


placemarks = [];
placemarks[57] = [41.903051,12.495799];
placemarks[58] = [41.38558,2.16874];
placemarks[59] = [51.50632,-0.127139];

var MyPlacemarks = [];
for ( key in placemarks ) {
MyPlacemarks.push(
new ymaps.Placemark(
placemarks[key],
{
content: key,
balloonContent: 'ID ' + key,
clusterCaption: 'Caption ' + key
}
)
);
}



myMap.geoObjects.add(clusterer);

clusterer.add(MyPlacemarks);



}

 


Нашел на просторах интернета 2 похожих куска кода, но не пойму как их допилить до нужного состояния - путаюсь с наследованием.

Как подняться от триггера ивента к объекту и получить его свойства? проблема усугубляется тем, что это может быть кластер в котором много объектов и надо получить свойства ID для них всех.



clusterer.events.add(
'balloonopen',
function (e) {
console.log(e.get('target').content ? e.get('target').content : e.get('target').state.get('activeObject').content);
}
)



а также



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

var object = e.get('target');

if (typeof object.getGeoObjects != 'undefined') {

// по наличию метода getGeoObject определяем, что это кластер
console.log (clusterer);



} else {

console.log (e.get('target'));

}

});




Очень надеюсь на отзывчивость сообщества.

либо вообще как-то подругому надо - уже всю голову сломал :(

4 комментария

тоже в событиях и деревьях этих ковыряюсь...

Это не решение, но посмотри, что нашел...

 

myMap.geoObjects.events.add(['click', 'balloonopen'],function (e) {

var SS = e.get('target').getOverlay().getGeometry().getType();

alert(SS);

});

 

пишет "Point"  (при клике по метке)

Проверь, что напишет на кляйстере...

 

Пока я эту строчку составил - вроде начал понимать в этой "сетке описания" кое что))))

Есть такой вот код , только не знаю насколько верно вешать обработчик события на каждый кластер. и можно ли это как то упростить.

 

clusterer.createCluster = function (center, geoObjects) {

     var cluster = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects);

      cluster.events.add('click', function(e) {

   var object =e.get('target');

   var dillers = object.properties.get('geoObjects');

   var need_properties=[];

   

   for (var i=0;i

   {

need_properties.push (geoObjects[i].properties.get('property'));

   }

/*  в массиве need_properties будут значения свойств/пропертис установленные у элементов входящих/объединенных в кластер */

...

});

return cluster;

};

        

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

   // получаем ссылку на объект, по которому кликнули

    var object = e.get('target');

   if (object.getGeoObjects) {

       // клик был на кластере

       var geoObjects = object.getGeoObjects();

       // получили массив геообъектов в составе кластера и теперь в цикле их обработаем

       for (var i = 0, l = geoObjects.length; i < l; i++) {

           var id = geoObjects[i].properties.get('id');

       }

    } else {

       // клик был по метке

       var id = object.properties.get('id');

    }

 

});

только этот вариант заработал - ниже мое исполнение


clusterer.events.add(['click', 'balloonopen'], function(e) {
                $('#photospreview .prev').hide();
                $('#photospreview .next').hide();
                idsArr = [];
                start = 0;
                stop = 0;

                var object = e.get('target');

                if (typeof object.getGeoObjects != 'undefined') {
                    var geoObjects = object.getGeoObjects();
                    var ids;
                    length = geoObjects.length;
                    for (var i = 0; i < length; i++) {
                        var id = geoObjects[i].properties.get('content');
                        idsArr.push(id);
                        if (i < 5) {
                            ids = ids ? ids + ',' + id : id;
                        }
                    }

                    $('#photos').load('/ajax-preview?pts=' + ids, function() {

                                $('#photospreview').fadeIn();
                            });

                    if (length > 6) {
                        $('#photospreview .next').show();
                    }

                } else {
                    var id = object.properties.get('content');
                    $('#photos').load('/ajax-preview?pts=' + id, function() {

                                $('#photospreview').fadeIn();
                            });

                }

            });