如何在所需位置定位传单变焦控制

Question

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

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

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

所以职位可以是

topleft
topright
bottomleft
bottomright

但我的目标是将控制窗口置于中间右侧。或者甚至我把控件放在角落里我想在顶部添加一些余量。我怎样才能做到这一点？有什么想法吗？

Answer 1

我们可以创建额外的Control占位符，默认情况下除了4个提供的角落外。

一个很好的优点是它允许在其中一个占位符中放置几个​​控件。它们将堆叠而不会重叠，就像在标准角落一样。

<强> 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可以使用百分比（使用父级维度）来指定。

<强> 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;
}

至于vertical centering占位符本身，您可以使用自己喜欢的技术。在这里，我使用CSS3 Transform将占位符偏移其自身高度的一半。

如果有必要（例如，对于旧的浏览器兼容性），您可以使用＆＃34;计算负载＆＃34;执行此偏移的方法，类似于iH8's answer。但是，只有在向占位符添加新控件时，您才不再需要在地图调整大小上运行它。

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

注意：目前有一个开放的PR（Leaflet/Leaflet #5554），但由于它与旧版本的Internet Explorer不兼容，因此不太可能在Leaflet核心中合并。

Answer 2

抓住地图的容器高度，除以2。减去缩放的容器高度除以2。使用绝对定位并指定顶部位置：

var mapHalfHeight = map.getSize().y / 2,
    container = map.zoomControl.getContainer(),
    containerHalfHeight = parseInt(container.offsetHeight / 2),
    containerTop = mapHalfHeight - containerHalfHeight + 'px';

container.style.position = 'absolute';
container.style.top = containerTop;

关于Plunker的示例：http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

请注意，当您不使用固定大小的地图容器时，每次调整地图容器的大小时都需要执行此操作。将它放在一个方法中，并将其连接到地图的resize事件，如提供的示例所示。

Answer 3

使用一行CSS可以轻松完成。使用响应式设计（Bootstrap）并移动添加了Leaflet.EasyButton的其他按钮。

.leaflet-control-container { position: absolute; right: 56px } 

Answer 4

如果您的地图不复杂，最简单的方法是使用CSS。

在您的情况下，您只需添加以下CSS：

.leaflet-top {
bottom: 0;
}

.leaflet-top .leaflet-control-zoom {
top:50%;
transform: translateY(-50%);
}

Answer 5

最简单准确

var map = L.map('map', {
    maxZoom: 20,
    minZoom: 6,
    zoomControl: false
});

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

Answer 6

这对我有用

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

L.control.zoom({ position: 'topright' }).addTo(map);

Answer 7

我需要一个像 middleleft 这样的缩放控件的新位置，所以

1- 克隆传单存储库

2- 在 dist/leaflet.css 添加

.leaflet-middle,
.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-middle{
  top: 50%;
}
.leaflet-middle .leaflet-control {
  margin-top: 5px;
}

3- 在 src/control/Control.js 添加

createCorner('bottom', 'right');
createCorner('middle', 'left');
createCorner('middle', 'right');

然后

npm install && npm run build

在您启动地图使用的脚本中，

L.control.zoom({  position: 'middleleft' }).addTo(map);