我希望在弹出窗口打开时将标记居中..并将地图居中,而不是在标记的经纬度上进行居中,但要在标记和弹出窗口的中心位置居中!
问题在于弹出窗口具有动态内容(在单击时加载)。
地图在移动设备上的尺寸为全屏显示大小! 我只是在弹出窗口中使用了autoPanPadding选项,但这还不够。
请参考以下图片:
我希望在弹出窗口打开时将标记居中..并将地图居中,而不是在标记的经纬度上进行居中,但要在标记和弹出窗口的中心位置居中!
问题在于弹出窗口具有动态内容(在单击时加载)。
地图在移动设备上的尺寸为全屏显示大小! 我只是在弹出窗口中使用了autoPanPadding选项,但这还不够。
请参考以下图片:
使用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
});
你好,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});
这里有一个简单的解决方案:
首先将地图居中到您的标记处。
map.setView(marker.latLng);
var popup.openOn(map); = L.popup()
.setLatLng(marker.latLng)
.setContent(dynamic-content)
.openOn(map);
map.on("popupopen", (event) => {
const popupPixelCoords = map.project(event.popup.getLatLng());
const popupHeight = event.popup.getElement().clientHeight;
popupPixelCoords.y -= popupHeight / 2; // move the popup vertical axis location down (distance: half of popup height)
map.panTo(map.unproject(popupPixelCoords), { animate: true }); // pan to calculated location
});
我的非常简单的解决方案还保持了当前的缩放级别,以提高可用性。
map.on('popupopen', function (e) {
map.setView(e.target._popup._latlng, e.target._zoom);
});