web-dev-qa-db-ja.com

リーフレットマップの更新：マップコンテナーは既に初期化されています

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

最初のリーフレットマップのロード後、マップを更新したい場合に問題が発生します。

私は常に「マップコンテナーは既に初期化されています」を取得します。

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

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

最初は適切にロードされますが、フォームで別のパラメーターを選択し、クラッシュしたときに別のマップを表示したい場合。

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

javascriptleaflet
40
leandro713

Html：

<div id="weathermap"></div>

JavaScript：

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}

私はこれを使用します：

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

マップをレンダリングするdivのコンテンツをリロードします。

21
Artem Kovalov

マップをリロードする前に、map.remove();を試してください。これにより、（jqueryの代わりに）Leafletのライブラリを使用して以前のマップ要素が削除されます。

86
Josh

一番いい方法

map.off();
map.remove();

Map.off（）を追加する必要があります。これも高速に動作し、イベントで問題を引き起こしません

20
yit770

よく、多くの探求の後、 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呼び出しごとに、before新しいポイントをペイントするときに、次のことを行います。

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

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

5
leandro713

マップを削除すると、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");
}
5
Damico

マップチェックを初期化する前に、マップが既に開始されているかどうか

var container = L.DomUtil.get('map');
      if(container != null){
        container._leaflet_id = null;
      }
4
Dipin Raj C

これだけを使用する

map.invalidateSize();

https://github.com/Leaflet/Leaflet/issues/69

2
Mahdi Bashirpour

angularページを切り替えるときに同じ問題が発生しました。ページを離れる前にこのコードを追加して動作させる必要がありました。

_    $scope.$on('$locationChangeStart', function( event ) {
    if(map != undefined)
    {
      map.remove();
      map = undefined
      document.getElementById('mapLayer').innerHTML = "";
    }
});
_

document.getElementById('mapLayer').innerHTML = ""がなければ、マップは次のページに表示されませんでした。

1
Dan.faudemer

試すことができるのは、マップを初期化する前またはページを離れるときにマップを削除することです。

if(this.map) {
  this.map.remove();
}
1
saeed karimi

私は同じ問題を抱えていました。次に、グローバルにマップ変数を設定します（例：var map = null）

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

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

1
shaishav shukla

renderAll（）ではなくredrawAll（）関数を使用してください。

0
Dilan