Question

我一次为多个组件设置谷歌地图，并在同一页面上显示它们我必须给它们所有独特的动态ID，为此，我需要将初始化放在{ {1}}我相信。所以我这样做了，但现在我的地图并没有显示出来。这就是我所拥有的......

在我的组件中：

ngAfterViewInit()

模板：

  ngAfterViewInit(){
    this.randId = this.randomIdGenerator(); <-- Generates an ID for the elements
    this.mapId = 'map-'+this.randId;
    this.pacId = 'pac-input-'+this.randId;
    this.map = new google.maps.Map(document.getElementById(this.mapId), this.mapConfig);
    this.input = <HTMLInputElement>document.getElementById(this.pacId);
    this.map.set("mapTypeId", 'roadmap');
    this.searchBox = new google.maps.places.SearchBox(this.input);
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.input);
    this.searchBox.addListener('places_changed', () => {
        this.placesChanged(this.searchBox.getPlaces()[0]);
    }); 
  }

我们正在为这些元素分配ID，但地图并没有显示出来。我也没有得到任何错误......看起来代码正在寻找元素。这很好。但是，在它找到了地图不会打开的元素之后。

Answer 1

所以这解决了它：

<div style="width:300px; height:300px" [id]="mapId"></div>

我猜div最初是以0px的大小创建的，而当我们将地图添加到它时没有增长。

Google地图未在Angular ngAfterViewInit

1 个答案: