Недавно занялся интеграцией яндекс карт на свой сайт и решил создать свой макет для балунов. Разумеется я недооценил задачу :)
Сначала сверстал примерный шаблон для балуна, вот он.
Но вот гладко его перенести на карты у меня не получается. Делаю в песочнице на основе примеров. Решил пока не заморачиваться по поводу всяких "хвостиков", описал в коде базовый код (код из примеров), но даже это не получилось - балун просто зависает в левом верхнем углу, а крестик не закрывает балун. Плюс ещё в консоль выводится куча ошибок.
Что я неправильно сделал, как решать? Весь код ниже:
ymaps.ready(init);
function init () {
var map = new ymaps.Map('map', {
center: [55.650625, 37.62708],
zoom: 10,
controls: []
}, {
searchControlProvider: 'yandex#search'
}),
counter = 0,
// Создание макета содержимого балуна.
// Макет создается с помощью фабрики макетов с помощью текстового шаблона.
BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-root ">'+
'<a class="close" href="#">×</a>'+
'<div class="arrow balloon-pin"></div>'+
'<div class="balloon-head balloon">$[properties.balloonHeader]</div>'+
'<div class="balloon-body balloon">$[properties.balloonContent]</div>'+
'<div class="balloon-footer balloon">$[properties.balloonFooter]</div>'+
'</div>', {
//Формирование макета
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.balloon-root', this.getParentElement());
this.applyElementOffset();
this._$element.find('.close')
.on('click', $.proxy(this.onCloseClick, this));
},
//удаление макета из DOM
clear: function () {
this._$element.find('.close')
.off('click');
this.constructor.superclass.clear.call(this);
},
//закрытие балуна
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
},
});
var placemark = new ymaps.Placemark([55.650625, 37.62708], {
iconContent: "test",
balloonHeader: 'Заголовок балуна',
balloonContent: 'Контент балуна',
balloonFooter: 'Футер балуна'
}, {
balloonShadow: true,
balloonLayout: BalloonContentLayout,
// Запретим замену обычного балуна на балун-панель.
// Если не указывать эту опцию, на картах маленького размера откроется балун-панель.
balloonPanelMaxMapArea: 1
});
map.geoObjects.add(placemark);
}
<!DOCTYPE html>
<html>
<head>
<title>Настройка макета балуна метки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<script src="placemark_balloon_layout.js" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
.balloon-root {
width: 300px;
height: 200px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;
border-radius: 10px;
background-color: #808080;
text-align: center;
color: white;
z-index: 10;
}
.close {
position: absolute;
right: 5px;
top: 3;
}
.balloon{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.balloon-head {
border-radius: 10px 10px 0 0;
width: 100%;
height: 30%;
background-color: #666;
font-size: 20px;
}
.balloon-body {
width: 100%;
height: 50%;
}
.balloon-footer {
width: 100%;
height: 30%;
font-size: 12px;
}
.balloon-pin {
height: 30px;
width: 30px;
position: absolute;
background-color: #808080;
z-index: -1;
bottom: -5px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>