リーフレット：無効なマップが無効になっています

Question

私はこの一夜で作業しています。googleに行くように教えてください。私はすべての重複した質問、私が見つけることができるリーフレットのドキュメントをすべて読んだだけで、なぜこれが動作していないのか理解できません。私は新しいMapquestタイルに切り替える必要がありましたが、すべてがうまくいきます。ただし、タイルの1つのコーナーだけを読み込むことができます。私はその答えがマップ無効化サイズであることを知っています。それは前に働いたことであり、それは私が今夜読んだすべての記事と質問/回答が答えだと言います。私は何かが明らかでない。助けてください。ここに私のスクリプトがあります：

<script> 
$('#locModal').on('show.bs.modal', function (event) { 

    var button = $(event.relatedTarget); 
    var mapinfo = button.data('whatever'); 
    var pos = mapinfo.position; 
    var lat = pos.substring(0,7); 
    var ling = pos.substring (10,17); 
    var map = L.map('mapdiv').setView([lat, ling], 6) 
    var name = mapinfo.name; 
    var contact = mapinfo.contact; 
    var address = mapinfo.address; 
    var city = mapinfo.city; 
    var state = mapinfo.state; 
    var zip = mapinfo.zip; 
    var phone = mapinfo.phone; 
    var p1 = phone.substring(0,3); 
    var p2 = phone.substring(3,6); 
    var p3 = phone.substring(6,10); 

if (map != undefined) { map.remove(); } 

window.setTimeout(function() { 
    map.invalidateSize(); 
}, 1000);  

var basemap = L.map('mapdiv', { 
    layers: MQ.mapLayer(), 
    center: [ lat, ling ], 
    zoom: 12, 
    }); 

L.marker([lat, ling]).addTo(map); 

$("#mapModalHeader").html("<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button><h2>" + "Map to " + name + "</h2>"); 


$("#mapModalFooter").html("Mailing Address: " + contact + " " + address + " " + city + ", " + state + " " + zip 
    + " " + "(" + p1 + ") " + p2 + "-" + p3); 

$('body').on('hidden.bs.modal', '.modal', function() { 
    document.location.reload(); 
}); 
}); 
</script> 

私はまた、このようなマップのinvalidateSize void次にを試してみた：

(function() { 
    map.invalidateSize(); 
}, 1000); 

私のライブのウェブサイト上のキーの機能が壊れていると私はあなたが私を与えることができる任意のヘルプを使用してください可能性があります。

Answer 1

本当にあなたがvar map = L.map('mapdiv').setView([lat, ling], 6)とあなたのマップを開始し、その後、あなたはmap.remove()でそれを破壊し、その後、あなたは1秒のタイムアウト後にそのサイズを更新しようとすると、最終的にはあなたが初期化

まず...あなたが達成しようとするものを混乱さあなたの地図をもう一度参照してください。var basemap = L.map('mapdiv'

この最初の間違いはおそらくこの奇妙な連続命令です。 HTML要素として作成されますが、すぐにdivマップコンテナとして（#mapdivあなたのケースでは）自分のマップを初期化することができ

• ：

  その後、あなたはあなたのコードを簡素化することができます。表示する必要はなく、DOMにアタッチする必要もありません。

• マップコンテナのサイズが変更されるとすぐにinvalidateSize()を使用できます。あなたのケースでは、コールバック内で直接"shown.bs.modal" event（使用したイベントの違いに注意してください："shown" v.s. "show"）。
• モーダルが開かれるたびに別の位置にマーカーを表示する必要がある場合は、マップを破壊してそのマップを最初から再作成する必要はありません。マーカーへのグローバル参照を保持し、削除して新しい位置に新しいマーカーを追加するだけです。 \t #mapdiv { \t \t表示：