谷歌地图不能初始化AngAfterViewInit

我有一次为多个组件设置了谷歌地图，并将它们全部显示在同一页面上，我必须为它们提供所有独特的动态ID，并且要做到这一点，我相信在ngAfterViewInit()初始化。所以我这样做了，但现在我的地图没有显示。这是我有...谷歌地图不能初始化AngAfterViewInit

在我的组件

：

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]); 
    }); 
    }

模板：

<md-card> 
    <input 
     style="color:black" 
     id="{{pacId}}" 
     name='address' 
     class="mapControls" 
     type="text" 
     value="" 
     placeholder="Enter Address"> 
    <div id="{{mapId}}"></div> 
</md-card>

该公司被分配到元素的ID，但是地图上只是显示不出来。我也没有得到任何错误...看起来代码是找到元素。这很好。但是在找到地图无法打开的元素之后。

来源

2017-09-14 Jus10

'id =“{{pacId}}”'>'id =“pacId”' –

同样的问题。地图未加载。当我把它放在'ngOnInit'中时，它正在加载，但是这并不起作用，因为那个时候模板ID是空的 – Jus10

而你对'mapId'做了同样的事情？ –

所以这个固定：

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

我想正在以0像素尺寸创建div最初，当我们添加了地图给它没有增长。

来源

2017-09-14 17:39:11 Jus10

谷歌地图不能初始化AngAfterViewInit

回答

相关问题