传单地图未居中正确答案

【问题标题】：leaflet map does not centre correct传单地图未居中正确
【发布时间】：2017-03-28 08:59:38
【问题描述】：

希望有人可以帮助我正确居中。我不确定问题出在哪里，因为似乎问题只存在于PC屏幕上，而在我的手机屏幕上是正确的。

在我调整浏览器窗口的大小后，标记居中正确。但是如何自动做到这一点？

自从我从传单 0.7 更新到 1.0.3 后，问题就出现了

地图上显示了几个标记和折线。最后，我尝试将标记与：

map.fitBounds(myBounds,{maxZoom:10});
map.invalidateSize();

myBounds 是标记的边界。

var myBounds = pline2.getBounds();

为了测试，我在所有添加的标记之间做了这条线：

var marker = L.marker(".$event->getLatLonJSArray().", { icon: myIcon, title: '".$title."'}).addTo(map);
pline2.addLatLng(".$event->getLatLonJSArray().");

地图未以边界为中心，但中心距标记更北。如果放大太多，标记甚至会超出视图框。

如果我在fitBounds 之前执行invalidateSize()，则图片如下所示。此外，我调整了浏览器窗口的大小。

谁能帮我用正确的代码来使地图居中？

感谢您的反应！

完整的浏览器开发工具：

<script>
              var MapData = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
              var Imagenary = ' | Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'; 

              var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              {
                 attribution: MapData,
                 maxZoom: 18
              });

              var mapbox = L.tileLayer('//{s}.tiles.mapbox.com/v3/oddityoverseer13.ino7n4nl/{z}/{x}/        {y}.png',
              {
                 attribution: MapData + Imagenary,
                 maxZoom: 18
              });

              var map = L.map('osm-map'); //.fitWorld().setZoom(10);

              osm.addTo(map); 

              var baseLayers = {
                 'Mapbox': mapbox,
                 'OpenStreetMap': osm
              };

              L.control.layers(baseLayers).addTo(map);
           var pline2 = L.polyline([], {color: "black"});var polyline = L.polyline([], {color: 'red', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.16201,4.50147], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 8 augustus 1650 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><a href="individual.php?pid=I3319&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span></a> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">8 augustus 1650</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.16201,4.50147]);
  pline2.addLatLng([52.16201,4.50147]);
  polyline.addTo(map);

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.1624538,4.5015904], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 28 juni 1669 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><a href="individual.php?pid=I3319&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span></a> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">28 juni 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.1624538,4.5015904]);
  pline2.addLatLng([52.1624538,4.5015904]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'blue', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'green', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'purple', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'orange', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkred', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'salmon', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'beige', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="beige" fill="beige"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Dochter: Dina Paulusdr Planjer (1661–) | Gedoopt: 6 februari 1661 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Dochter: </span><a href="individual.php?pid=I3208&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Dina <span class="SURN">Paulusdr Planjer</span></span></a> (<span title="6 februari 1661">1661</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">6 februari 1661</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkblue" fill="darkblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Jacobus Paulusz Planjer (1662–) | Gedoopt: 12 maart 1662 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3295&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Jacobus <span class="SURN">Paulusz Planjer</span></span></a> (<span title="12 maart 1662">1662</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">12 maart 1662</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkgreen', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkgreen" fill="darkgreen"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1664–) | Gedoopt: 23 maart 1664 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3336&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span></a> (<span title="23 maart 1664">1664</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">23 maart 1664</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'cadetblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="cadetblue" fill="cadetblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1666–) | Gedoopt: 7 februari 1666 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3179&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span></a> (<span title="7 februari 1666">1666</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">7 februari 1666</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkslateblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkslateblue" fill="darkslateblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Johannes Planjer (1669–) | Gedoopt: 14 april 1669 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3294&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Johannes <span class="SURN">Planjer</span></span></a> (<span title="14 april 1669">1669</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">14 april 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  pline2.addTo(map);var myBounds2 = pline2.getBounds();map.fitBounds(myBounds2,{maxZoom:10});
  map.invalidateSize();
  </script>

【问题讨论】：

你能添加几个屏幕截图，添加一个具有所需边界的矩形吗？你的问题现在还不清楚。
为什么要在invalidateSize 之后 fitBounds？如果您对地图视口有疑问，您很可能希望在修改地图视图之前解决它。
@ghybs：在fitBounds 之前使用invalidateSize，情况会更糟。标记在地图上太高了，地图的下半部分是白色的。
@Jopla 那么你可能有一个搞砸的地图容器......为我们提供一个可重现的现场案例（在 Plunker、JSFiddle 等上）很可能有必要看看什么可能是错误的并且是能够帮助你。
@ghybs：我不确定如何制作一个现场案例，因为它是 Webtrees.net 中的一个模块

标签： leaflet

【解决方案1】：

无法在您的框架之外重现您的问题（Webtrees.net？）：

http://playground-leaflet.rhcloud.com/huto/1/edit?html,output

可能发生的情况是您的地图容器大小在代码运行前后调整了多次。

当您调整浏览器窗口大小时一切正常，这确实是一个很好的指标，表明 Leaflet 无法检索正确的地图容器大小，并且您尝试执行 map.invalidateSize() 可能是正确的。但是，您的地图容器在此之前和之后仍然会更改大小，因为更改地图视图不会产生预期的视图。

一种盲目的解决方法可能是在延迟一段时间后执行大小失效和地图视图更改，希望您的框架同时解决您的地图容器大小。

setTimeout(function () {
  map.invalidateSize();
  map.fitBounds(myBounds2, {
    maxZoom: 10
  });
}, 500); // Adjust the value (in ms)

当然，正确的解决方法是确定问题是否确实来自地图容器大小被更改，然后如何知道大小达到其最终状态，并在那一刻执行上述代码。

如果这不能解决您的问题，即使使用很长的延迟（例如几秒钟），那么问题可能会有所不同。

顺便说一句：您的新屏幕截图在顶部显示了某种标签。在这种情况下，请确保您在标签显示后运行invalidateSize，然后再次更改地图视图。

见：Data-toggle tab does not download Leaflet map

【讨论】：

感谢您的反应。在您的示例中，它工作正常。我想试试setTimeout。但是我是否只需要替换我的invalidateSize() 和fitBounds() 为您的代码（给出灰色字段而不是地图），还是让我添加任何行来激活setTimeout？抱歉，我对javascript不太熟悉。
抱歉，用这么少的细节几乎不可能进一步帮助您。您应该考虑发布更多代码（包括 HTML 和 CSS），并且最好提供一个实时案例。您可以为您的框架提供一个示例。
文件module.php生成传单脚本
抱歉，我不会深入研究您的所有代码。请提供MCVE
抱歉，我不知道如何将应用程序作为 webtrees 最小化并且仍然可以使用。我的理解是webtrees如何处理代码和传单正在做什么之间的冲突，这对我正在做的事情没有帮助。 Leaflet 0.7.3 与 webtrees 1.7.9 一起工作正常。传单 1.0.3 不是。我的结论是否正确，即错误将在于它们如何处理自 1.0.3 以来的窗口大小？