在传单中自定义属性

Question

我是传单的新手，并且在开放街道地图中使用传单路由机进行路由服务。我想自定义默认布局。例如，从 API 文档中，我可以更改缩放图标的默认位置：

var zoom=L.control.zoom({
        position:'topright',

        }).addTo(map);  

但我想对默认属性进行更多更改，例如内联显示缩放按钮，或更改背景属性。

我尝试从inspect 元素中获取div 并改变了一些外观，但它非常有限。有什么方法可以完全访问和更改传单中的布局属性？

Answer 1

正如您已经发现的那样，除了position 选项之外，您没有其他逻辑可以使用。传单缩放控件无非是以下标记：

<div class="leaflet-control-zoom leaflet-bar leaflet-control">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a>
    <a class="leaflet-control-zoom-out" href="#" title="Zoom out">-</a>
</div>

所有样式都是通过 CSS 完成的，当您想要自定义它时，这就是要走的路。例如切换到内联并更改背景颜色。

.leaflet-control-zoom a {
    display: inline-block;
    background-color: blue;
}