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

Question

我希望中心我的标记在弹出窗口打开..并且中心地图不在标记latlng中,而是在标记和弹出窗口的中心!问题是popup有dinamic内容(点击加载).

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

参考下图:

此解决方案集成在KeplerJs框架代码中.

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 项目/非项目功能应提供帮助。

即

// 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为弹出窗口添加margin-top.