Javascript 是否更改移动设备上的传单层控制图标？

我怀着极大的兴趣关注这篇文章 并实现了更改传单图层切换按钮图标的建议代码。这在桌面浏览器上运行良好，请参见图片和

---

但是，我已经在不同移动设备上的许多浏览器上进行了测试，它始终是显示在图层开关（）上的默认传单图标。我们如何在移动设备上也更改图标？

在玩了我想到的一些东西之后。它适用于我在Android 9、Firefox和Chrome浏览器上使用

我通常不建议深入到传单的内部方法，但我看不到一个更干净的方法来实现这一点。您还需要实现CSS

var-map=L.map（“map”）.setView（[19.04469,72.9258]，12）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var controllayer1=L.control.layers（{map:map}，{}）.addTo（map）；
L.Control.Layers2=L.Control.Layers.extend({
_initLayout:函数（）{
L.Control.Layers.prototype.\u initLayout.call（this）；
//如果传单内部方法将来发生变化，则替换而不是覆盖
让ownclasses=this.\u layersLink.getAttribute（'class'）；
此._layersLink.setAttribute（'class'，ownclasses.replace（'slaple-control-layers-toggle'，'slaple-control-layers-toggle-2'））
}
});
L.control.layers2=函数（…args）{
返回新的L.Control.Layers2（…args）；
};
var controllayer2=L.control.layers2（{map:map}，{}）.addTo（map）
#地图{
高度：500px；
宽度：80%；
}
.单张栏a，
.传单-control-layers-toggle-2{
背景位置：50%50%；
背景重复：无重复；
显示：块；
}
.传单-control-layers-toggle-2{
背景图片：url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
宽度：36px；
高度：36px；
}
//应该是更详细的版本
.视网膜小叶。小叶-控制-层-切换-2{
背景图片：url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
背景尺寸：26px 26px；
}
.传单触摸。传单-控制-图层-切换-2{
宽度：44px；
高度：44px；
}
.传单控制层展开。传单-控制-层-切换-2{
显示：无；
}

JS-Bin
在玩了一会儿之后，我想出了一个办法。它适用于我在Android 9、Firefox和Chrome浏览器上使用

我通常不建议深入到传单的内部方法，但我看不到一个更干净的方法来实现这一点。您还需要实现CSS


var-map=L.map（“map”）.setView（[19.04469,72.9258]，12）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var controllayer1=L.control.layers（{map:map}，{}）.addTo（map）；
L.Control.Layers2=L.Control.Layers.extend({
_initLayout:函数（）{
L.Control.Layers.prototype.\u initLayout.call（this）；
//如果传单内部方法将来发生变化，则替换而不是覆盖
让ownclasses=this.\u layersLink.getAttribute（'class'）；
此._layersLink.setAttribute（'class'，ownclasses.replace（'slaple-control-layers-toggle'，'slaple-control-layers-toggle-2'））
}
});
L.control.layers2=函数（…args）{
返回新的L.Control.Layers2（…args）；
};
var controllayer2=L.control.layers2（{map:map}，{}）.addTo（map）
#地图{
高度：500px；
宽度：80%；
}
.单张栏a，
.传单-control-layers-toggle-2{
背景位置：50%50%；
背景重复：无重复；
显示：块；
}
.传单-control-layers-toggle-2{
背景图片：url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
宽度：36px；
高度：36px；
}
//应该是更详细的版本
.视网膜小叶。小叶-控制-层-切换-2{
背景图片：url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
背景尺寸：26px 26px；
}
.传单触摸。传单-控制-图层-切换-2{
宽度：44px；
高度：44px；
}
.传单控制层展开。传单-控制-层-切换-2{
显示：无；
}

JS-Bin
这是否也发生在不同的移动浏览器上？这是否也发生在不同的移动浏览器上？由@kvothe提出的解决方案运行良好。我在Chrome和Safari的旧iphone（5S）上进行了测试，@kvothe提出的解决方案运行良好。我在Chrome和Safari上用一台旧iphone（5S）测试了它。