javascript - 更改传单图层控件图标

标签 javascript html css leaflet

当有多个这样的图层控件时,我如何更改网页中 Leaflet 图层控件图标的图标?

目标是在这里有不同的图标:

screenshot of two layers controls

代码如下:

var layers1 = L.control.layers(...).addTo(map);
var layers2 = L.control.layers(...).addTo(map);

如果我通过 CSS 更改控件的图标,它会在所有图层控件中更改。

最佳答案

我遇到了同样的问题,但我找到了一个更快的解决方案。 我只是以这种方式从我的应用程序的 styles.css 覆盖了特定图层控件的 background-image 属性:

.leaflet-top.leaflet-right .leaflet-control-layers:nth-child(3) .leaflet-control-layers-toggle {
    background-image: /*set you value*/
}

在我的例子中,第二个图层控件是第三个子控件(工具栏、图层控件 1 和图层控件 2),因此更改该索引以获得正确的控件。希望对您有所帮助!

关于javascript - 更改传单图层控件图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50544217/

相关文章:

html - 如何让文本在 CSS 中围绕不规则形状流动

javascript - jQuery .scrollTop 无法正确滚动

javascript - 通过单击 div 填充输入 - jQuery

html - WebGL 和 HTML 着色器类型

java - 尝试在 mac 上获取 libGDX

javascript - 如何根据使用的语言使用CSS增加文本的空间宽度?

java - JSP 中的 CSS 样式

javascript - 如何使用 anchor 标记显示内容

javascript - 在 Node.js 中使用 htmlparser2 选择 html Node 的文本内容

html - 反转内联 block 的顺序?