Клуб API Карт

Раскрыть кластер и показать баллун при клике на ссылку

brdvedomosti
19 марта 2015, 11:49

Есть карта с кластеризатором. Сбоку -- список названий точек, размещенных на этой карте.

При клике по ссылке активируется соответствующий баллун. Но для точек, находящихся в данный момент в кластере баллун не активируется. Как сделать так, чтобы при клике по ссылке с названием точки, находящейся в кластере происходило увеличение карты до раскрытия кластера и выводился баллун?

Вот как у меня это реализовано:

data -- это массив с точками, полученный по запросу с сервера

myMap -- объект карты.

 

 

var $points = [];
var $ul = $('<ul class="cat-map-item-list"></ul>');
for(var count = 0; count < data.length; count++){
     $points[count] = addListItem($ul, data[count]);
}
$ul.appendTo('#cat-list-box');
addPointList(myMap, $points);

 

// Здесь создаем точку и создаем элемент списка. Вешаем на него прерывание по клику

function addListItem($ul, data){
    var $li = $("<li><a href='#' id='map-list-item-" + data.id + "' data-id='" + data.id + "' class='switch-off'>" + data.properties.hintContent + "</a></li>");
    var $newPoint = new ymaps.GeoObject(data);

    // Обработчик клика по ссылке
    $li.appendTo($ul).find('a').click(function(){
        if($(this).hasClass('switch-on')){
            $(this).removeClass('switch-on').addClass('switch-off');
            $newPoint.balloon.close();
        }else{
            $('.switch-on').removeClass('switch-on').addClass('switch-off');
            $(this).removeClass('switch-off').addClass('switch-on');
            $newPoint.balloon.open();
        }
    });
    return $newPoint
}

 

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

function addPointList(myMap, $points){
    var clusterer = new ymaps.Clusterer({clusterDisableClickZoom: false});
    clusterer.add($points);
    myMap.geoObjects.add(clusterer);
}

 

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

Мы делились таким примером в блоге

http://ymapsapi.ya.ru/replies.xml?item_no=892

Смотрел я этот пример. Для меня слишком наворочено. Я сталкиваюсь с противоречием. Для того, чтобы считать информацию о кластеризаторе точки, на момент создания обработчика он должен существовать. А у меня так: точка - вешаем обработчик - создаем кластеризатор.

А как можно определить есть ли кластеризатор и получить на него ссылку для конкретной точки?

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

Можно коротуленький примерчик навеса обработчика на кластеризатор? И еще вопрос вдогонку. Имеет ли значение то, что точки могут быть в кластере и по отдельности? Если мы вешаем обработчик на кластеризатор. В общем, я уровень примера приведенного выше не тяну. :о(

точно такой же интерфейс как и у метки

myClusterer.events.add("click", function (e) {

    console.log(e.get("target")); // либо метка либо кластер

});