Leaflet 如何将传单缩放控件定位在所需位置 我想把缩放控件放在地图中间的右边，也就是在地图最右边的中间。我已经找到了使用以下代码将缩放控件放置在不同角落的解决方案 var map = new L.map("map-container",{ zoomControl: false }); new L.Control.Zoom({ position: 'topleft' }).addTo(map);

所以位置可以是

topleft
topright
bottomleft
bottomright

---

但是我的目标是把控制窗口放在中间的右边。甚至我把控件放在角落里，我想在顶部增加一些边距。我该怎么做？有什么想法吗？

抓取地图的容器高度，除以二。减去缩放的容器高度，除以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的示例：

---

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

除了默认情况下提供的4个角之外，我们还可以创建其他控件占位符

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

JavaScript:

//创建其他控件占位符
函数addControlPlaceholders（映射）{
var corners=映射。\u controlCorners，
l='传单-'，
容器=映射。\u控制容器；
函数createCorner（vSide、hSide）{
变量className=l+vSide+“”+l+hSide；
corners[vSide+hSide]=L.DomUtil.create（'div'，className，container）；
}
createCorner（‘垂直中心’、‘左’）；
createCorner（'verticalcenter'，'right'）；
}
addControlPlaceholders（地图）；
//将缩放控件的位置更改为新创建的占位符。
map.zoomControl.setPosition（'verticalcenterright'）；
//也可以将其他控件放在同一占位符中。
L.control.scale（{position:'verticalcenterright'}）.addTo（map）；

然后就可以很容易地用CSS设置这些占位符的样式，因为它们的DOM父对象就是映射容器本身。因此，

顶部

、

底部

、

左侧

和

右侧

可以用百分比指定（使用父维度）

CSS:

。传单垂直中心{
位置：绝对位置；
z指数：1000；
指针事件：无；
顶部：50%；/*可能，因为占位符的父项是地图*/
transform:translateY（-50%）；/*使用CSS3转换技术*/
填充顶部：10px；
}
.传单垂直中心.传单控制{
边缘底部：10px；
}

至于占位符本身，你可以使用你最喜欢的技巧。在这里，我使用CSS3转换将占位符偏移其自身高度的一半

如有必要（例如，对于旧浏览器兼容性），您可以使用“加载时计算”方法来执行此偏移，类似于。但是，仅当向占位符添加新控件时，您不再需要在“地图调整大小”上运行它

现场演示：

---

注意：目前对此有一个开放的PR（），但由于它与旧版本的Internet Explorer不兼容，它可能不会合并到传单核心中。

这可以通过一行CSS轻松完成。与响应性设计（引导）配合使用，并移动添加了

传单的附加按钮。EasyButton

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

---

如果你的地图并不复杂，最简单的方法就是使用CSS

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

.leaflet-top {
bottom: 0;
}

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

---

简单准确

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

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

---

这对我来说很有效

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

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

---

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

1-克隆传单存储库

2-在dist/传单.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');

然后

在启动地图使用的脚本中

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

---

初始化映射后：

map.zoomControl.setPosition（'bottomright'）


控件的位置（地图的一个角点）。可能的值为“左上”、“右上”、“左下”或“右下”

正如您看到的“从继承的选项”

下面是控制类中的所有方法：

getPosition()
setPosition(<string> position)
getContainer()
addTo(<Map> map)
remove()

getPosition（）
设置位置（位置）
getContainer（）
地址（地图）
删除（）
对于传单1.0.3，我需要包括行
z-index:1000。否则，我可以单击控件，但它不可见。演示：感谢您提供此解决方案！它就像传单1.5.1上的符咒一样有效！这将添加第二个缩放控件。不，您必须关闭默认的缩放控件。var map=L.map（'map'，{maxZoom:20，minZoom:6，zoomControl:false}）；此zoomControl:false将禁用默认缩放，然后禁用L.control.zoom（{position:'bottomright'}）.addTo（map）；这将在指定位置添加新控件。由于某种原因，
zoomControl:false
无法工作。不知道为什么-可能是个bug？无论如何，我添加了代码
map.zoomControl.remove（）在添加新的缩放控件之前。欢迎使用StackOverflow！请包含对代码的解释，并说明为什么它与其他五个答案一样好或更好。这个问题已经四年了，已经有了一个公认的答案。对于这样的问题，没有解释的答案往往会被否决或删除。要使其完全居中，请添加
margin top:0
这是最好、最简洁的答案。谢谢。：）啊!！我需要回忆一下。没有进一步的调整，这项技术就变得非常糟糕。因为它将整个容器和包含属性线从右下角移出视口。那么它就隐藏起来了！小心。这正在执行以下操作：。传单控制容器。传单顶部。传单左侧{位置：绝对；左侧：自动；右侧：10px；}
getPosition()
setPosition(<string> position)
getContainer()
addTo(<Map> map)
remove()