传单中心弹出和标记到地图 [英] Leaflet center popup AND marker to the map

问题描述

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

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

请参阅以下图片：

解决方案

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

  map.on（'popupopen'，function（e）{
 var px = map.project popup._latlng）; //找到地图上的像素位置，弹出锚点是
 px.y  -  = e.popup._container.clientHeight / 2 //找到弹出窗口的高度，除以2从标记位置的Y轴减去
 map.panTo（map.unproject（px），{animate：true}）; //平移到新中心
}）; 
  

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).

The map size is full display size in a mobile device! I'm just used autoPanPadding option in popup but not sufficient

Refer to follow picture:

解决方案

Using fitzpaddy's answer I was able to make this code which works and is much more flexible.

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

这篇关于传单中心弹出和标记到地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！