如何将传单缩放控件放置在所需位置 [英] 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变换将占位符偏移其自身高度的一半.

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.

如果有必要(例如，为了与旧浏览器兼容)，您可以使用按负载计算"方法来执行此偏移，类似于

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(传单/传单#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屋！