Как вызвать компонент Leaflet несколько раз в Angular 8?

Question

когда я вызываю свой компонент один раз, моя карта листовок в порядке: -)

<map-affiche [lat]="lat" [lng]="lng"></map-affiche>

, но когда я звоню несколько раз, у меня появляется ошибка: ERROR Error: «Контейнер карты уже инициализирован. "

html:

<div id="map" class="center"></div>

машинописный текст:

  @Input() lat: number;
  @Input() lng: number;

  ngOnInit() {
    const map = L.map('map', {
      center: [this.lat, this.lng],
      zoom: 19,
      attributionControl: false
    });
   }

Есть идея ??? спасибо !!!

Answer 1

component.ts

// I assume you have a unique id if not you could use some random value or maybe combination of lat + lan...
public mapId: string = "map" + this.id; 
...
ngAfterViewInit() {
    const map = L.map(this.mapId, {
      center: [this.lat, this.lng],
      zoom: 19,
      attributionControl: false
    });
   }

component. html

 <div id="{{mapId}}" class="center"></div>