如何将传单缩放控件定位在所需位置

Question

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

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

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

所以位置可以是

topleft
topright
bottomleft
bottomright

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

Answer 1

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

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

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 将占位符偏移其自身高度的一半。

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

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

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

Answer 2

最简单准确的

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

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

Answer 3

这可以更简单一点，只需一行 CSS。与响应式设计 (Bootstrap) 一起使用，并移动使用 Leaflet.EasyButton 添加的其他按钮。

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

Answer 4

获取地图的容器高度，除以二。减去缩放的容器高度，除以二。使用绝对定位并分配顶部位置：

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

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

Answer 5

这对我有用

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

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

Answer 6

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

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

.leaflet-top {
bottom: 0;
}

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

Answer 7

我需要一个新的位置来用于缩放控件，比如 middleleft，所以

1- 克隆 Leaflet 存储库

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);

Answer 8

初始化地图后：

map.zoomControl.setPosition('bottomright');

Here is the documentation

控件的位置（地图角之一）。可能的值是“topleft”、“topright”、“bottomleft”或“bottomright”

如您所见“从Control 继承的选项”

这里是 Control 类的所有方法：

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