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

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

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

如果有必要(例如,对于旧的浏览器兼容性),您可以使用"计算加载"方法来执行此偏移,类似于iH8的答案.但是,只有在向占位符添加新控件时,才需要在map resize上运行它.

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

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

Answer 2

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

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

Answer 3

初始化地图后：

map.zoomControl.setPosition('bottomright');

这是文档

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

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

这是 Control 类的所有方法：

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

Answer 4

抓住地图的容器高度,除以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 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);