JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"/>
CSS
#map {
width: 640px;
height: 480px;
}
JavaScript
jQuery(function () {
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 state.geoObjects %}',
'<li><a href=# data-placemarkid="{{ geoObject.placemarkId }}" class="list_item">{{ geoObject.balloonContentHeader|raw }}</a></li>',
'{% endfor %}',
'</ul>'
].join(''));
jQuery(document).on( "click", "a.list_item", function() {
// Определяем по какой метке произошло событие.
var selectedPlacemark = placemarks[jQuery(this).data().placemarkid];
alert( selectedPlacemark.properties.get('balloonContentBody') );
});
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
clusterOpenBalloonOnClick: true,
// Устанавливаем режим открытия балуна.
// В данном примере балун никогда не будет открываться в режиме панели.
clusterBalloonPanelMaxMapArea: 0,
// По умолчанию опции балуна balloonMaxWidth и balloonMaxHeight не установлены для кластеризатора,
// так как все стандартные макеты имеют определенные размеры.
clusterBalloonMaxHeight: 200,
// Устанавливаем собственный макет контента балуна.
clusterBalloonContentLayout: customBalloonContentLayout
});
// Заполняем кластер геообъектами со случайными позициями.
for (var i = 0, l = 100; i < l; i++) {
var placemark = new...