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

Posted 2021-03-28

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

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

参考下图：

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

答案

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

map.on('popupopen', function(e) {
    var px = map.project(e.popup._latlng); // find the pixel location on the map where the popup anchor is
    px.y -= e.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
});

另一答案

嗨斯特凡诺，

这是未经测试的伪代码，但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，这只是一个平缓的过渡）。

祝好运！

另一答案

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

首先，您将地图置于标记中心。

map.setView(marker.latLng);

然后打开弹出窗口。

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

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