0

Как контролировать поведение baloon?

Задача.

Использую кластеризацию. Необходимо всегда показывать balloon всех объектов-кластеров.

Проблема в том, что всегда открыт только балун последнего объекта-кластера в переборе, так как одновременно может существовать только один балун.

UPD Все балуны всех кластеров должны быть открыты всегда с момента инициализации карты. Такие себе статичные тултипы над иконкой кластера с отображением информации о количестве точек в кластере.

5
  • А есть пример кода? Причин этому может быть несколько.
    – E1mir
    14 сен в 10:46
  • Насколько я понял, это дефолтное поведение балуна. При открытии нового сначала закрывается уже существующий. Возможно есть способ переопределить это поведение.
    – rebroff
    14 сен в 13:09
  • А ну в этом случае да, есть способ создать свои маркеры кластера балунов, ща напишу в ответе
    – E1mir
    14 сен в 16:23
  • я правильно понимаю нужны свои балуны для кластеров(которые открываются по клику) и 1 общий открытый постоянно, в котором как бы информация обо всех имеющихся на данный момент кластерах?
    – Arbery
    14 сен в 17:03
  • @Kjuri, нет. Все балуны всех кластеров должны быть открыты постоянно без возможности закрытия. Балуны выполняют роль тултипов для отображения количества точек в кластере. Никакой динамики и поведения.
    – rebroff
    15 сен в 7:44

2 ответа 2

0

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

  1. вопрос изменения размера/приближения-отдаления карты - внизу закомментирован код с boundschange - с ним нестабильно работает, нужно тестировать и проверять, или жестко запрещать все манипуляции.
  2. в документации Яндекс я видела, что балун может только 1, большее количество не рекомендуется - стабильность множества добавленных балунов неопределенна

ymaps.ready(function() {
  var mapCenter = [55.755381, 37.619044],
    map = new ymaps.Map('map', {
      center: mapCenter,
      zoom: 10,
      controls: []
    }),
    placemarks = [];
  var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
    '<ul class=list>',
    '{% for geoObject in properties.geoObjects %}',
    '<li><a href=# data-placemarkid="{{ geoObject.properties.placemarkId }}" class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
    '{% endfor %}',
    '</ul>'
  ].join(''));

  var clusterer = new ymaps.Clusterer({
    clusterDisableClickZoom: true,
    clusterOpenBalloonOnClick: true,
    clusterBalloonPanelMaxMapArea: 0,
    clusterBalloonMaxHeight: 200,
    clusterBalloonContentLayout: customBalloonContentLayout
  });


  for (var i = 0, l = 100; i < l; i++) {
    var placemark = new ymaps.Placemark(getRandomPosition(), {
      balloonContentHeader: 'Заголовок метки №' + (i + 1),
      balloonContentBody: 'Информация о метке №' + (i + 1),
      placemarkId: i
    });
    placemarks.push(placemark);
  }

  clusterer.add(placemarks);
  map.geoObjects.add(clusterer);

  function getRandomPosition() {
    return [
      mapCenter[0] + (Math.random() * 0.3 - 0.15),
      mapCenter[1] + (Math.random() * 0.5 - 0.25)
    ];
  }

  let allBallons = [];
  let setBallons = () => {
    let allClusters = clusterer.getClusters();
    allClusters.forEach(cluster => {
      let balloon = new ymaps.Balloon(map);
      allBallons.push(balloon);
      balloon.options.setParent(map.options);
      balloon.open(cluster.geometry.getCoordinates());
      let contentClaster = '';
      cluster.getGeoObjects().forEach(place => {
        contentClaster += place.properties.get('balloonContentBody') + '<br>';
      })
      balloon.setData({
        content: contentClaster
      });
    })
  }

  setBallons();
  /*
      map.events.add('boundschange', function () {
        if (allBallons.length > 0) {
          allBallons.forEach(baloon => {
            baloon.close()
          })
          allBallons.length = 0;
        }
        setBallons();
      });
  */
});
html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
#map {
  width: 100%;
  height: 100%;
}

.list {
  list-style: none outside;
  margin: 0;
  padding: 0;
}

.list li {
  padding-bottom: 10px;
}

.list a {
  color: #207697;
}

.list a:hover {
  color: #28B8F0;
  text-decoration: none;
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
<div id="map"></div>

0

Возможно это дефолтное поведение balloon в ymaps. Но можно создать свой собственный и назначить своё поведение:


// Создаем собственный макет балуна для объектов-кластеров
const clusterBalloonLayout = ymaps.templateLayoutFactory.createClass(
    '<div class="cluster-balloon">' +
        '<h2>{{properties.clusterCaption}}</h2>' +
        '<p>{{properties.clusterContent}}</p>' +
    '</div>'
);

// Создайте собственный балун для объектов-кластеров
const clusterBalloon = new ymaps.Balloon(map, {
    layout: clusterBalloonLayout
});

// При клике на кластер, обновляем и открываем собственный балун
cluster.events.add('click', (e) => {
    const cluster = e.get('target');
    const clusterObjects = cluster.getGeoObjects();
    const clusterCaption = "Cluster Info";
    let clusterContent = "";

    // Собираем информацию о всех объектах в кластере
    clusterObjects.forEach((object) => {
        clusterContent += `${object.properties.get('balloonContent')}<br>`;
    });

    clusterBalloon.setData({
        clusterCaption,
        clusterContent
    });

    // Открываем собственный балун
    clusterBalloon.open(cluster.geometry.getCoordinates(), {
        // Тут уже назначаем параметры открытия балуна (по умолчанию или наши настройки)
    });
});

Думаю это решение вам подойдёт.

2
  • Спасибо большое. Ваш код действительно мне помог разобраться в некоторых вещах. Я видимо не совсем корректно сформулировал вопрос. Все балуны всех кластеров должны быть открыты всегда с момента инициализации карты. Такие себе статичные тултипы над иконкой кластера с отображением информации о количестве точек в кластере. Я пробовал решать этот вопрос через свой макет иконки, но проблема в том, что часть иконки (круг) должна менять свой размер в соответствии с количеством точек в кластере, а тултип при это должен свой размер сохранить.
    – rebroff
    15 сен в 7:40
  • Пробовал зайти через хинты, но там проблем еще больше, чем с балунами. Да и вообще это семантически ну прям совсем неподходящая сущность.
    – rebroff
    15 сен в 7:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.