如何将传单缩放控件定位在所需位置 [英] How to locate leaflet zoom control in a desired position

问题描述

我想将缩放控件放在地图的右中，即地图最右侧的中间.我找到了使用以下代码将缩放控件放在不同角落的解决方案

I want to place the zoom control in middle right of the the map i.e. in the middle of the right most side of the map. I have found solution to put the zoom control in different corners using the following code

var map = new L.map("map-container",{ zoomControl: false });

   new L.Control.Zoom({ position: 'topleft' }).addTo(map);

所以位置可以是

topleft
topright
bottomleft
bottomright

但我的目标是把控制窗口放在中间的右边.甚至我把控件放在角落我想在顶部添加一些边距.我怎样才能做到这一点?有什么想法吗?

But my goal is to put the control window in the middle right. Or even I put the control in the corner I want to add some margin to the top. How can I do that? Is there any idea?

推荐答案

除了默认提供的 4 个角外，我们还可以创建额外的 Control 占位符.

We can create additional Control placeholder(s), besides the 4 provided corners by default.

一个很好的优势是它允许在其中一个占位符中放置多个控件.它们将堆叠而不重叠，就像在标准角中一样.

A nice advantage is that it allows putting several Controls in one of those placeholders. They will stack without overlapping, as in the standard corners.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

    function createCorner(vSide, hSide) {
        var className = l + vSide + ' ' + l + hSide;

        corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

然后使用 CSS 为这些占位符设置样式就变得很容易了，因为它们的 DOM 父级就是地图容器本身.因此 top、bottom、left 和 right 可以用百分比指定(使用父级的尺寸).

Then it becomes easy styling those placeholders with CSS, because their DOM parent is the map container itself. Hence top, bottom, left and right can be specified with percentages (which use the parent's dimensions).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

至于 垂直居中占位符本身，您可以使用您喜欢的技术.这里我使用 CSS3 Transform 将占位符偏移其自身高度的一半.

As for vertical centering the placeholder itself, you can use your favourite technique. Here I used the CSS3 Transform to offset the placeholder by half of its own height.

如有必要(例如为了旧浏览器的兼容性)，您可以使用calculate-on-load"方法来执行此偏移，类似于 iH8的回答.但是您不再需要在调整地图大小时运行它，仅在将新控件添加到占位符时才需要.

If necessary (e.g. for old browsers compatibility), you can rather use a "calculate-on-load" method to perform this offset, similar to iH8's answer. But you no longer need to run it on map resize, only when adding new Control(s) to the placeholder.

现场演示:https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

注意:目前有一个公开 PR (Leaflet/Leaflet #5554)这个，但由于它与旧版本的 Internet Explorer 不兼容，因此不太可能合并到 Leaflet 核心中.

Note: there is currently an open PR (Leaflet/Leaflet #5554) for this, but since it is not compatible with old versions of Internet Explorer, it will not likely be merged in Leaflet core.

这篇关于如何将传单缩放控件定位在所需位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！