LeafletJS：マップコンテナは既に初期化されています

Question

私は2枚目のアプリケーションでリーフレットを使用しています。アプリを初めて実行するとき。 Everyhtingは大丈夫です。しかし、別のページに移動してマップに戻った場合、次の例外が発生します。

例外：エラー：未知（約束）：例外：ビルド/ページ/マップ/ map.htmlのエラー：12：18 ORIGINAL EXCEPTION：エラー：マップコンテナが既に初期化されています。 ORIGINAL STACKTRACE： エラー：マップコンテナが既に初期化されています。

このページに戻ると、私用変数マップはnullになります。私は問題が新しいL.Map（「mainmap」であると思うので、ヌルをbeeingて、この変数をチェックすると、あなたのngOnInit()で

export class MainMapComponent { 

    private map; 

    constructor(
    private mapService: MapService, 
    private geoCodingService: GeocodingService) { } 

    ngOnInit() { 
    console.log(this.map); 
    if(this.map == null) this.initMap(); 
    } 

    initMap() { 
    console.log('init'); 
    if(this.map) this.map.remove(); 
    this.map = new L.Map('mainmap', { 
     zoomControl: false, 
     center: new L.LatLng(40.731253, -73.996139), 
     zoom: 12, 
     minZoom: 4, 
     maxZoom: 19, 
     layers: [this.mapService.baseMaps.OpenStreetMap], 
     attributionControl: false 
    }); 
    console.log(this.map); 
    } 

} 

Answer 1

if(this.map == null)条件がときをするので、常にtrueです...効果はありません新しいインスタンスが割り当てられていないので（すなわちundefined）まだ、this.map新しい独自のブランドを取得すること、新しいMainMapComponentをインスタンス化します。

これはあなたの"mainmap"のdivコンテナに起こったかもしれないものとは全く異なるものである。

あなたの問題の説明にもっと近づくために、マップから移動するときは、"mainmap" divコンテナにはまだというマップがあります。あなたのページに戻ってくると、新しいMainMapComponentインスタンスがインスタンス化されたようです（まだ割り当てられていません）this.mapです。したがって、"mainmap" divコンテナで新しいマップを初期化しようとします。これがエラーの原因です。

あなたのMainMapComponentインスタンスが破棄されたときに"mainmap" divのステータスがMainMapComponentのインスタンスが存在する（またはしない）と同等になるよう、this.map.remove()を使用することを試みることができます。何らかの理由で、MainMapComponentという複数のインスタンスが同時に存在すると、それはあなたの問題を解決しません。

---

更新：最後に言及した問題に関しては

、あなたのコンポーネントに関連付けられたテンプレートのコードは何Initializing leaflet map in angular2 component after DOM object exists