谷歌地圖不能初始化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

回答

相關問題