主页 / 问题 / 1540598
Accepted
rebroff
Asked:2023-09-14 17:01:51 +0000 UTC2023-09-14 17:01:51 +0000 UTC

Yandex 地图。加载地图时必须立即打开所有簇对象的气球

  • 772

如何控制气球行为？

任务。

我使用聚类。有必要始终显示所有群集对象的气球。

问题在于，只有搜索中最后一个簇对象的气球始终打开，因为一次只能存在一个气球。

UPD 从卡初始化的那一刻起，所有集群的所有巴伦都必须始终打开。这些是簇图标上方的静态工具提示，显示有关簇中点数的信息。

yandex-maps-jsapi

2 个回答

  1. 也许这是 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(), {
        // Тут уже назначаем параметры открытия балуна (по умолчанию или наши настройки)
    });
});

    我认为这个解决方案适合您。

    • 0
  2. Best Answer

    有这样一个解决方案——所有集群都打开（以全分辨率检查），但这不是最终的解决方案，需要改进。

    1. 更改地图大小/放大/缩小的问题 - 下面注释掉了代码boundschange- 它工作不稳定，需要测试和检查，或者严格禁止所有操作。
    2. 在Yandex文档中我看到只能有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

相关问题