传单中心弹出和标记到地图答案

【问题标题】：Leaflet center popup AND marker to the map传单中心弹出和标记到地图
【发布时间】：2014-04-27 14:57:00
【问题描述】：

我希望我的标记在弹出窗口的中心居中.. 并且不在标记 latlng 中居中地图，而是在标记和弹出窗口的中心！问题是弹出窗口具有动态内容（点击时加载）。

地图大小是移动设备中的完整显示大小！我只是在弹出窗口中使用了 autoPanPadding 选项，但还不够

参考下图：

【问题讨论】：

【解决方案1】：

使用fitzpaddy 的回答，我能够使这段代码有效且更加灵活。

map.on('popupopen', function(e) {
    var px = map.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is
    px.y -= e.target._popup._container.clientHeight/2; // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
    map.panTo(map.unproject(px),{animate: true}); // pan to new center
});

【讨论】：

【解决方案2】：

Ciao Stefano，

这是未经测试的伪代码，但 Leaflet project/unproject 函数应该提供帮助。

即;

// Obtain latlng from mouse event
var latlng;
// Convert latlng to pixels
var px = project(latlng);
// Add pixel height offset to converted pixels (screen origin is top left)
px.y -= mypopup.height/2
// Convert back to coordinates
latlng = unproject(px);
// Pan map
map.panTo(latlng,{animate: true});

这取决于缩放比例在计算过程中保持不变，因此您可能需要平移地图，然后计算平移偏移以正确更新（使用animation，这将只是一个温和的过渡）。

祝你好运！

【讨论】：

【解决方案3】：

这是一个简单的解决方案：

首先将地图以标记为中心。

map.setView(marker.latLng);

然后你打开弹出窗口。

var popup.openOn(map); = L.popup()
    .setLatLng(marker.latLng)
    .setContent(dynamic-content)
    .openOn(map);

Leaflet 会自动平移地图，以便弹出窗口适合地图。要使其看起来更漂亮，您可以使用 CSS 为弹出窗口添加一个 margin-top。

【讨论】：

非常感谢！正在寻找这样的自动答案。计算弹出高度的其他答案对我不起作用。
这个解决方案的问题是它没有使弹出窗口和标记居中。它只会确保弹出窗口位于可见地图内。
@DanMandle 我认为如果您要添加 top: 50%;翻译：transformY(-50%);在 CSS 中，它实际上会位于地图的中心。

【解决方案4】：

我非常简单的解决方案也保持当前缩放级别以提高可用性。

map.on('popupopen', function (e) {
    map.setView(e.target._popup._latlng, e.target._zoom);
});

【讨论】：