javascript 传单中心弹出窗口和地图标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22538473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet center popup AND marker to the map
提问by stefcud
I want center my marker on popup open.. and centering map not in marker latlng, but on center of marker and popup! The problem is that popup has dinamic content(loaded on click).
我想让我的标记在弹出窗口中居中打开......并且将地图居中不在标记 latlng 中，而是在标记和弹出窗口的中心！问题是弹出窗口有动态内容（点击加载）。
The map size is full display size in a mobile device! I'm just used autoPanPadding option in popup but not sufficient
地图大小是移动设备中的完整显示大小！我只是在弹出窗口中使用了 autoPanPadding 选项但还不够
Refer to follow picture:
参考下图：
回答by Dan Mandle
Using fitzpaddy's answer I was able to make this code which works and is much more flexible.
使用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
});
回答by fitzpaddy
Ciao Stefano,
乔斯特凡诺，
This is untested pseudocode, but Leaflet project/unprojectfunctions should provide assistance.
这是未经测试的伪代码，但 Leaflet项目/取消项目功能应该提供帮助。
i.e;
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});
This depends on zoom scale being constant during calculation, so you might be required to pan the map and then calculate the pan offset to update correctly (using animation, this will only be a gentle transition).
这取决于在计算过程中缩放比例是恒定的，因此您可能需要平移地图，然后计算平移偏移量才能正确更新（使用动画，这将只是一个温和的过渡）。
Good luck!
祝你好运！
回答by Titsjmen
Here's an easy solution:
这是一个简单的解决方案：
First you center the map to your marker.
首先，您将地图居中到您的标记处。
map.setView(marker.latLng);
Then you open the popup.
然后你打开弹出窗口。
var popup.openOn(map); = L.popup()
.setLatLng(marker.latLng)
.setContent(dynamic-content)
.openOn(map);
Leaflet will automatically pan the map so the popup fits on the map.To make it look more beautiful you can add a margin-top to the popup with CSS.
Leaflet 将自动平移地图，以便弹出窗口适合地图。为了使它看起来更漂亮，您可以使用 CSS 在弹出窗口中添加边距顶部。
回答by Rami Alloush
My very simple solution keeps the current zoom level as well for better usability.
我的非常简单的解决方案保持当前的缩放级别以及更好的可用性。
map.on('popupopen', function (e) {
map.setView(e.target._popup._latlng, e.target._zoom);
});
