Как изменить имя класса кнопки на Яндекс-картах на IE11?
Я создаю пользовательскую кнопку со следующим кодом:
const clusterShowButton = new ymaps.control.Button({ data: {
content: SVG_CLUSTER_SHOW,
title: 'Отключить кластеризацию',
selectOnClick: true,
size: 'small'
}
});
После этого я пытаюсь назначить некоторый класс CSS:
clusterShowButton._layout._buttonElement.className += 'my-button';
Это работает во всех браузерах, кроме Internet Explorer 11 (даже в Microsoft Edge). После дальнейшего изучения я понял, что в IE11 clusterShowButton._layout
нулевой.
Вопросы:
- Как назначить пользовательский класс? (Я знаю, что не так корректно изменять частные свойства, названные подчеркиванием)
- Это ошибка Яндекс карт?
1 ответ
Вы можете обратиться к коду, чтобы добавить макет кнопки для пользовательской кнопки, затем добавьте класс:
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.650625, 37.62708],
zoom: 10,
controls: []
}),
/**
* The button layout should display the 'data.content' field
* and change depending on whether the button was clicked or not.
* The current size (small, medium, large) is calculated from the value of the 'maxWidth' option
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.Button.xml#param-parameters
*/
ButtonLayout = ymaps.templateLayoutFactory.createClass([
'<div title="{{ data.title }}" class="my-button ',
'{% if state.size == "small" %}my-button_small{% endif %}',
'{% if state.size == "medium" %}my-button_medium{% endif %}',
'{% if state.size == "large" %}my-button_large{% endif %}',
'{% if state.selected %} my-button-selected{% endif %}">',
'<img class="my-button__img" src="{{ data.image }}" alt="{{ data.title }}">',
'<span class="my-button__text">{{ data.content }}</span>',
'</div>'
].join('')),
button = new ymaps.control.Button({
data: {
content: "Click-click-click",
image: 'images/pen.png',
title: "Click-click-click"
},
options: {
layout: ButtonLayout,
maxWidth: [170, 190, 220]
}
});
myMap.controls.add(button, {
right: 5,
top: 5
});
}
Более подробно, пожалуйста, проверьте макет кнопки Custom.