JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1.25/?lang=ru-RU"></script>
<div id="map"></div>
CSS
#map {
width: 400px;
height: 400px;
}
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"],
});
// Создадим 2 пункта выпадающего списка
listBoxItems = [
new ymaps.control.ListBoxItem({
data: {
content: 'OSM',
center: [55.751574, 37.573856],
zoom: 9,
map: osmLayer
}
}),
new ymaps.control.ListBoxItem({
data: {
content: 'Топо карта',
center: [58.598, 49.657],
zoom: 9,
map: TopoLayer
}
})
];
listBox = new ymaps.control.ListBox({
data: {
content: 'Карта'
},
items: listBoxItems
});
listBox.events.add(['select', 'deselect'], function (e) {
// Получаем ссылку на объект, по которому кликнули. События элементов списка пропагируются и их можно слушать на родительском элементе.
var item = e.get('target');
// консоль
//console.log(e);
// Клик на заголовке выпадающего списка обрабатывать не надо.
if (e.get('type') === 'select') {
listBox.data.set('content', item.data.get('content'));
...