Версия:
Популярные примеры
Карта
Геообъекты
Балун и хинт
Элементы управления
Активные области
Кластеризация
GeoQuery
Поведения и события
Поиск по карте
Пробки
Местоположение пользователя
Маршрутизация
YMapsML
GeoXML
ObjectManager
Модульная система
Панорамы
Внешние модули

Макета балуна кластера "Две колонки"

Сохранить как файлыЭкспорт на JSFiddle
В примере используется макет балуна кластера "cluster#balloonTwoColumns".
Данный макет состоит из двух колонок: списка всех геообъектов и информации о выбранном геообъекте.
Информация о выбранном геообъекте задается отдельным макетом
и может быть настроена при помощи опции 'clusterBalloonItemContentLayout'.
В данном примере задается собственный макет с информацией о геообъекте.

Макеты
объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.
Текстовые шаблоны формируют html-содержимое макета на основе хэша с данными, передаваемого в конструктор макета.
В данном примере поставщик данных - это выбранный в левой колонке геообъект.
\n","cluster_balloon_twoColumns.js":"ymaps.ready(function () {\n var mapCenter = [55.755381, 37.619044],\n map = new ymaps.Map('map', {\n center: mapCenter,\n zoom: 9,\n controls: []\n });\n \n // Создаем собственный макет с информацией о выбранном геообъекте.\n var customItemContentLayout = ymaps.templateLayoutFactory.createClass(\n // Флаг \"raw\" означает, что данные вставляют \"как есть\" без экранирования html.\n '

{{ properties.balloonContentHeader|raw }}

' +\n '
{{ properties.balloonContentBody|raw }}
' +\n ''\n );\n \n var clusterer = new ymaps.Clusterer({\n clusterDisableClickZoom: true,\n clusterOpenBalloonOnClick: true,\n // Устанавливаем режим открытия балуна. \n // В данном примере балун никогда не будет открываться в режиме панели.\n clusterBalloonPanelMaxMapArea: 0,\n // Устанавливаем размер макета контента балуна (в пикселях).\n clusterBalloonContentLayoutWidth: 350,\n // Устанавливаем собственный макет.\n clusterBalloonItemContentLayout: customItemContentLayout,\n // Устанавливаем ширину левой колонки, в которой располагается список всех геообъектов кластера.\n clusterBalloonLeftColumnWidth: 120\n });\n \n // Заполняем кластер геообъектами со случайными позициями.\n var placemarks = [];\n for (var i = 0, l = 100; i < l; i++) {\n var placemark = new ymaps.Placemark(getRandomPosition(), {\n // Устаналиваем данные, которые будут отображаться в балуне.\n balloonContentHeader: 'Метка №' + (i + 1),\n balloonContentBody: getContentBody(i),\n balloonContentFooter: 'Мацуо Басё'\n });\n placemarks.push(placemark);\n }\n \n clusterer.add(placemarks);\n map.geoObjects.add(clusterer);\n \n function getRandomPosition () {\n return [\n mapCenter[0] + (Math.random() * 0.3 - 0.15),\n mapCenter[1] + (Math.random() * 0.5 - 0.25)\n ];\n }\n \n var placemarkBodies;\n function getContentBody (num) {\n if (!placemarkBodies) {\n placemarkBodies = [\n ['Желтый лист в ручье.', 'Просыпайся, цикада,', 'Берег все ближе.'].join('
'),\n ['Ива на ветру.', 'Соловей в ветвях запел,', 'Как ее душа.'].join('
'),\n ['Лежу и молчу,', 'Двери запер на замок.', 'Приятный отдых.'].join('
') \n ];\n }\n return 'Тело метки №' + (num + 1) + '
' + placemarkBodies[num % placemarkBodies.length];\n }\n clusterer.balloon.open(clusterer.getClusters()[0]);\n});"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/cluster_balloon_twoColumns/"}
Пишете на JavaScript? У нас есть вакансии
Sun Sep 18 2022 20:10:14 GMT+0300 (Moscow Standard Time)