76

ユーザーに選択を与えると、表示するリーフレットマップを切り替えることができるページがあります。

最初のリーフレット マップの読み込み後、私の問題はマップを更新するときです。

私はいつも「マップコンテナはすでに初期化されています」というメッセージを受け取ります:

問題の行は次のとおりです。

var map = L.map('mapa').setView([lat, lon], 15);

最初はうまくロードされますが、フォームで別のパラメータを選択してマップを表示しようとすると、クラッシュします。

$('#mapa')ところで、 2番目の前にjQueryで破棄して再作成しようとしましsetView()たが、同じエラーが表示されます。

4

23 に答える 23

19

マップを初期化する前に、マップが既に開始されているかどうかを確認します

var container = L.DomUtil.get('map');
      if(container != null){
        container._leaflet_id = null;
      }
于 2018-04-26T04:38:16.767 に答える
5

まあ、よく探した後、http://leafletjs.com/examples/layers-control.htmlで十分に文書化されていることに気付きました

マップを再描画せずに終了しましたが、一度印刷して新しい ajax 呼び出しごとにポイントを再描画するため、問題は古いポイントをクリーンアップして新しいポイントのみを印刷する方法でした。私はこれをやめました：

var point = L.marker([new_marker[0], new_marker[1]]).addTo(map).bindPopup('blah blah');
points.push(point); 
//points is a temporary array where i store the points for removing them afterwards

したがって、新しい ajax 呼び出しごとに、新しいポイントを描画する前に、次のことを行います。

for (i=0;i<points.length;i++) {
  map.removeLayer(points[i]);
}
points=[];

ここまでは順調ですね ：-）

于 2013-10-05T16:56:42.093 に答える
5

マップを削除すると、div id 参照が破棄されるため、remove() の後で、「Uncaught Error: Map container not found」を回避するために、マップが表示される div を再度作成する必要があります。

if(map != undefined || map != null){
    map.remove();
   $("#map").html("");
   $("#preMap").empty();
   $( "<div id=\"map\" style=\"height: 500px;\"></div>" ).appendTo("#preMap");
}
于 2016-11-17T15:19:07.577 に答える
1

私は同じ問題を抱えていました。次に、var map = nullなどのグローバルマップ変数を設定し、表示マップについてチェックします

if(map==null)then map=new L.Map('idopenstreet').setView();

このソリューションにより、マップは L.Map によって塗りつぶされた後に初めて初期化され、その後 null にはなりません。そのため、マップ コンテナーが既に初期化されているようなエラーは発生しません。

于 2016-06-06T13:43:08.077 に答える
1

同じページでマップを更新するには、以下のコードを使用してページにマップを作成できます

if (!map) {
    this.map = new L.map("mapDiv", {
        center: [24.7136, 46.6753],
        zoom: 5,
        renderer: L.canvas(),
        attributionControl: true,
    });
}

次に、下の行を使用してマップを更新しますが、必ず同じ緯度、経度、ズーム オプションを使用してください。

map.setView([24.7136, 46.6753], 5);

また、angular 2+を使用して同じページ内のタブを切り替えるときに同じ問題が発生し、コンポーネントに以下のコードを追加することで修正できましたconstructor

var container = L.DomUtil.get('mapDiv');
if (container != null) {
    container.outerHTML = ""; // Clear map generated HTML
    // container._leaflet_id = null; << didn't work for me
}
于 2020-09-08T20:04:25.947 に答える
0

リーフレット マップを更新するには、次のコードを使用できます。

this.map.fitBounds(this.map.getBounds());

于 2020-07-28T05:10:35.190 に答える
0

私はreactjsでこれをやった

// Create map (dev = reuse existing map)
let myMap = L.DomUtil.get('map');
if(myMap == null){
  myMap = L.map('mapid').setView(currentLocation, zoom);
}
于 2021-08-05T22:20:11.463 に答える