传单中心弹出窗口和地图标记

Question

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

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

参考下图：

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

Answer 2

乔斯特凡诺，

这是未经测试的伪代码，但 Leaflet项目/取消项目功能应该提供帮助。

IE;

// 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 ，这将只是一个温和的过渡）。

祝你好运！

Answer 3

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

首先，您将地图居中到您的标记处。

map.setView(marker.latLng);

然后你打开弹出窗口。

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

Leaflet 将自动平移地图，以便弹出窗口适合地图。 为了使它看起来更漂亮，您可以使用 CSS 在弹出窗口中添加边距顶部。

Answer 4

我非常简单的解决方案保持当前的缩放级别以及更好的可用性。

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