Angular 2 Leaflet：地圖容器已經初始化

我通過TSD導入傳單Typescript命名空間來初始化地圖，但是我每次實例化一個新組件（包含地圖）時都會重新初始化地圖。這裏的組件的代碼：Angular 2 Leaflet：地圖容器已經初始化

import { Component, Input, OnInit} from '@angular/core'; 

    import { MapDetail } from './map'; 

    @Component({ 
     selector:'map-detail', 
     templateUrl: 'views/map.html' 
    }) 
    export class MapDetailComponent implements OnInit { 
     @Input() map: MapDetail; 

     ngOnInit(): void { 

      var div = document.getElementById('map'); 
      var mymap : L.Map = L.map(div, { 
       center: L.latLng(47.137, 1.890), 
       zoom: 7,  
       dragging: true, 
       [More options ...] 
      }); 

     var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?', { 
       minZoom: 3, 
       maxZoom: 18, 
      }); 


      tileLayer.addTo(mymap); 
     } 
    }

和HTML：

<div id="mapid"></div>

任何想法/提示是極大的讚賞。

UPDATE：ngOnInit被調用兩次。我曾經使用過一個服務來調用它。現在，因爲它是一個空白頁面，所以我直接調用這個組件。

更新2：好像它與此問題有關https://github.com/angular/angular/issues/6782 有沒有任何已知的解決方法？

來源

2016-09-27 Ismail H

您可以簡單地將您的div或mymap記錄到您班級的私人成員中，並僅在該成員爲undefined時才初始化地圖。

但是，如果您的頁面上有該組件的多個實例，則可能仍然存在問題。我不確定Shadow DOM如何處理具有相同ID的div的組件？

或者只需在使用Leaflet初始化之前先檢查地圖容器是否爲空。

來源

2016-09-27 16:20:03 ghybs

我加入HTML。該成員將永遠不會被定義，因爲它存在。我可以做一些檢查，看看裏面是否有內容，但我不確定這是否是有效的方法。並不確定Shadow DOM是什麼。讓我找到它。 –

此解決方案尚未適用於我。當我實例化一個新組件時，構造函數和ngnit函數都會重新運行。他們都說私人成員每次都是未定義的，所以錯誤仍然存在。 – carpiediem

@carpiediem您可能會對此感興趣：http://stackoverflow.com/questions/42428251/initializing-leaflet-map-in-angular2-component-after-dom-object-exists/42431059#42431059 – ghybs

你也可以嘗試一下本作的地圖實現： https://angular-maps.com/

來源

2016-09-27 16:31:06 Manish

有沒有辦法使用OSM而不是Google地圖？ –

Angular 2 Leaflet：地圖容器已經初始化

回答

相關問題