JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style> <script type="text/javascript" src="https://yandex.st/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="https://api-maps.yandex.ru/2.1.18/?lang=ru_RU&mode=debug"></script> <style> html, body {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
JavaScript
init();
function init() {
ymaps.ready(function () {
loadMap();
});
}
function loadMap() {
var mapCenter = [55.755381, 37.619044];
var map = new ymaps.Map('map', {
center: mapCenter,
zoom: 10,
controls: []
});
var objectManager = new ymaps.ObjectManager({
clusterize: true,
clusterBalloonPanelMaxMapArea: 0
});
objectManager.clusters.options.set({
balloonContentLayout: 'cluster#balloonCarousel'
});
<!-- при клике на некластеризованные объекты получаем содержимое балуна -->
objectManager.objects.events.add('click', function (e) {
var objectId = e.get('objectId');
if (hasBalloonData(objectId)) {
objectManager.objects.balloon.open(objectId);
} else {
getBalloonData(objectId).done(function (data) {
var obj = objectManager.objects.getById(objectId);
obj.properties.balloonContent = data;
objectManager.objects.balloon.open(objectId);
});
}
});
var currentObject = objectManager.clusters.state.get('activeObject');
objectManager.clusters.events.add('balloonopen', function (e) {
debugger;
var clusterId = e.get('objectId');
currentObject = objectManager.clusters.state.get('activeObject');
<!-- Нам нужен id объекта, чтобы получить данные балуна -->
objectId = currentObject.id;
if (!hasBalloonData(objectId)) {
getBalloonData(objectId).done(function (data) {
var obj = objectManager.objects.getById(objectId);
obj.properties.balloonContent = data;
objectManager.clusters.balloon.open(clusterId);
});
}
});
<!-- пытаемся формировать содержимое балуна кластера -->
objectManager.clusters.state.events.add('change', function () {
var newCurrentObject = objectManager.clusters.state.get('activeObject');
...