javascript - 如何在 IE11 上更改 YandexMaps 上按钮的类名?
问题描述
我使用以下代码创建自定义按钮:
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 中)。经过进一步调查,我意识到在 IE11clusterShowButton._layout
中为空。
问题:
- 如何分配自定义类?(我知道更改下划线命名的私有属性不太正确)
- 是 YandexMaps 的错误吗?
解决方案
您可以参考代码为自定义按钮添加按钮布局,然后添加类:
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
});
}
更多细节,请查看自定义按钮布局。
推荐阅读
- visual-studio - 如何使 Visual Studio 代码在调试控制台和终端之间拆分视图
- python-2.7 - 使用 Pandas 将数组中的多个值存储到 Excel 中
- python - 如何在 python 中全局设置小数精度而不总是输入 Decimal()?
- javascript - 如何从 Angular 6 中的服务中获取数据?
- xamarin - 什么是非应用兼容 Xamarin 应用程序?
- c++ - 在 C++ 中设置数据结构,每个类只包含一个外观
- twilio - 想在 Twilio Studio 中使用 Whisper
- java - 无法理解此代码中的 .this 关键字使用
- c# - ExecuteNonQuery :: Error Data too long for column at row 2 无论我是否已使用 c# 将 .csv 文件插入 Mysql
- java - 将 hssf 工作簿转换为 xssf 工作簿没有给出预期的结果