リーフレットの地図が正しくない

うまくいけば誰かが正しい中心に私を助けることができます。問題はPCの画面上にしか存在せず、私の携帯電話の画面上には正しいと思われるので、問題の原因がわからない。リーフレットの地図が正しくない

ブラウザウィンドウのサイズを変更した後、マーカーの中央が正しく表示されます。しかし、それを自動的に行う方法は？ I地図上1.0.3

にリーフレット0.7から更新されたいくつかのマーカーやポリラインを示すため

問題が示されています。最後に、マーカーを次のようにフィットさせようとします。

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()を入力すると、画像が下に表示されます。また、修正されたものよりも、私はブラウザウィンドウのサイズを変更しました。

地図のセンタリングに正しいコードを教えてもらえますか？

ありがとうございます！

ブラウザ開発ツールから取られた完全な：

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

出典

2017-03-28 Jopla

は、あなたが希望境界を持つ矩形を追加し、スクリーンショットのカップルを追加することはできますか？あなたの質問は今明らかではありません。 – IvanSanchez

** 'fitBounds'の後に' invalidateSize'を実行するのはなぜですか？マップビューポートで問題が発生した場合は、地図ビューを変更する前に解決することをお勧めします。 – ghybs

@ghybs： 'fitBounds'の前に' invalidateSize'を指定するとさらに悪化します。マーカーは地図上では高く、地図の下側は白です。 – Jopla

はあなたの枠組みの外で、あなたの問題を再現できませんでした（Webtrees.net？）：

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

何が起こることがあることですコードコンテナのサイズは、コードの実行前後で数回調整されます。

ブラウザウィンドウのサイズを変更したときにすべてがうまく動作するということは、実際にリーフレットが正しいマップコンテナサイズを取得できなかったことを示す非常に良い指標であり、おそらくは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

出典

2017-03-28 11:30:56 ghybs

にあります[webtrees]（http://webtrees.net） - モジュールの完全なコードあなたの反応に感謝します。あなたの例では正しく動作します。私は 'setTimeout'を試してみたい。しかし、あなたのコードに 'invalidateSize（）'や 'fitBounds（）'を置き換えるだけでいいですか（マップの代わりに灰色のフィールドを与えます）、 'setTimeout'をアクティブにする行を追加することができますか？申し訳ありませんが、私はあまりjavascriptに精通していません。 – Jopla

申し訳ございませんが、ごくわずかな詳細でさらにお手伝いすることはほとんど不可能です。 HTMLやCSSを含む多くのコードを公開し、理想的にはライブケースを提供することを検討する必要があります。フレームワークの例を提供することができます。 – ghybs

https://github.com/Joppla/osm4webtreesにあるすべてのコード – Jopla

リーフレットの地図が正しくない

答えて

関連する問題