在 function 调用上加载 mapbox 的 map

Question

我正在使用 Angular 框架中的 Mapbox 渲染。 现在面临的问题是我无法在浏览器中加载 map。 I have defined a function where I've given all the required to load the map and I am calling the function from an HTML div container after validating a condition. 控件进入 function 但错误是它没有识别 map 的容器属性。

我的 HTML 代码：

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

我的脚本：

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.

错误

另外，真的可以用 function 调用加载 map 还是我只是在这里浪费时间？

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

一旦*ngIf返回 true / 中的语句完成，map <div id="map">的容器属性就可用。 只要您的loadMap()尚未完成，情况就不会如此。 因此，您无法识别容器。

--> 在调用 function 之前，容器需要存在。