Загрузка карты mapbox при вызове функции

Question

Я работаю с рендерингом Mapbox в Angular framework. Сейчас проблема в том, что я не могу загрузить карту в браузере. Я определил функцию, в которой я дал все необходимое для загрузки карты, и я вызываю функцию из контейнера HTML div после проверки условия. Элемент управления переходит в функцию, но ошибка в том, что он не идентифицирует свойство контейнера карты.

Мой HTML код:

<div id="map" style="margin-top: 370px;" *ngIf="result;then loadMap()">

my скрипт:

loadMap(){
this.map=new Map({

  container:document.getElementById('map') ,//'map'

  style: 'mapbox://styles/mapbox/streets-v11',

  center: { lng: -102.380979, lat: 35.877742 },

  zoom: 9,

  pitch: 20,

  attributionControl: false
  });

  this.map.addControl(
    new NavigationControl({
      showZoom: true,
      showCompass: true
    }),
    'bottom-right'
  );
}

Ошибка, с которой я сталкиваюсь:

Error: Invalid type: 'container must be a String or HTMLElement.

Ошибка

Кроме того, это так? реально ли загрузить карту вызовом функции или я просто трачу здесь время?

Answer 1

Это то, что я делал. Я не могу дать ngAfterViewInit, потому что это требуется для инициализации DOM.

   export class DashboardComponent implements OnChanges,OnDestroy,AfterViewInit {

 @Input() searchResults:SidenavComponent;

  private map: Map;

  constructor(){  }


  ngOnChanges(changes:SimpleChanges){

     if(!changes.searchResults){
       console.log("Inside if");
       console.log(changes.searchResults)
       this.ngAfterViewInit()
     }

    // const preValue=changes['searchResults'].previousValue;
    // const curValue=changes['searchResults'].currentValue;
    // if(preValue!=curValue){
    //   this.ngAfterViewInit()
    // }

}

   ngAfterViewInit(){

     this.map=new Map(
       {

         container:document.getElementById('map'),

         style: 'mapbox://styles/mapbox/streets-v11',

         center: { lng: -102.380979, lat: 35.877742 },

         zoom: 9,

         pitch: 20,

         attributionControl: false
       });
       this.map.addControl(

         new NavigationControl({

           showZoom: true,

           showCompass: true
         }),

         'top-right'

       );

   }

      ngOnDestroy(){
     this.map.remove();
   }
}

Answer 2

Свойство контейнера карты <div id="map"> доступно после того, как оператор в *ngIf вернет true / завершится. Это не тот случай, пока ваш loadMap() не закончен. Поэтому вы не можете идентифицировать контейнер.

-> Контейнер должен существовать до того, как вы сделаете вызов функции.