Question

希望有人可以帮我纠正中心。我不确定问题是否来自，因为看起来这个问题只存在于PC屏幕和我的手机屏幕上，这是正确的。

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

自从我从传单0.7更新到1.0.3

以来，问题就出现了

在地图上显示了几个标记和折线。最后，我尝试使用以下标记：

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

myBounds是标记的范围。

var myBounds = pline2.getBounds();

为了测试我在所有添加的标记之间做了这个pline：

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

地图不以边界为中心，但中心距标记更北。如果放大到很多标记甚至在视图框之外。

如果我在invalidateSize()之前fitBounds，图片就会显示在下面。除了它的更正后，我调整了浏览器窗口的大小。

谁能帮助我使用正确的地图中心代码？

感谢您的反应！

完整取自浏览器开发工具：

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

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

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

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

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

请参阅：Data-toggle tab does not download Leaflet map

传单地图不正确

1 个答案: