JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1.25/?lang=ru-RU"></script>
<link rel="stylesheet" href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css">
<div id="map"></div>
CSS
#map {
width: 400px;
height: 400px;
}
#my-listbox {
top: auto;
left: auto;
}
JavaScript
ymaps.ready(init);
function init() {
var osmLayer = new ymaps.Layer('http://otile%d.mqcdn.com/tiles/1.0.0/osm/%z/%x/%y.png', {
projection: ymaps.projection.sphericalMercator,
tileTransparent: true
});
var TopoLayer = new ymaps.Layer('http://otile%d.mqcdn.com/tiles/1.0.0/osm/%z/%x/%y.png', {
projection: ymaps.projection.sphericalMercator,
tileTransparent: true
});
var myMap = new ymaps.Map("map", {
center: [58.598, 49.657],
zoom: 12,
type: 'yandex#map',
autoCentering: true,
autoZooming: true,
controls: ["rulerControl", "zoomControl", "fullscreenControl"],
});
// Создадим собственный макет выпадающего списка.
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
'<button id="my-listbox-header" class="btn btn-success dropdown-toggle" data-toggle="dropdown" title="{{data.title}}">{{data.content}} <span class="caret"></span></button>' +
// Этот элемент будет служить контейнером для элементов списка. В зависимости от того, свернут или
// развернут список, этот контейнер будет скрываться или показываться вместе с дочерними элементами.
'<ul id="my-listbox" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: {% if state.expanded %}block{% else %}none{% endif %};"></ul>' +
'<div class="my-listbox-checkinput"><input type="checkbox" id="my-checkbox" value="1"></input> Автопозиция</div>', {
build: function () {
$('#my-listbox-header').bind("click", console.log("string"));
// Вызываем метод build родительского класса перед выполнением дополнительных действий.
ListBoxLayout.superclass.build.call(this);
this.childContainerElement = $('#my-listbox').get(0);
// Генерируем специальное событие, оповещающее элемент управления о смене контейнера дочерних элементов.
this.events.fire('childcontainerchange', {
...