2017-05-25 75 views
1

我使用map2 API與ionic2,一切工作正常第一次我輸入地圖的形式,但如果我回去,然後返回到地圖相同的形式位於,地圖不會出現,只是全屏的[]圖標和谷歌詞出現,我不知道爲什麼?
當我打開完整的地圖時,它顯示正常。有點奇怪。map2 api與ionic2不能正常工作

export class MapPage { 

    @ViewChild('mapCanvas') mapElement: ElementRef; 
    constructor(public navCtrl: NavController, public platform: Platform) { 
    platform.ready().then(() => { 
     this.loadMap(); 
    }); 
    } 


    public loadMap() { 
    let mapEle = this.mapElement.nativeElement; 
    let currentLocation = { lat: 34.5419832, lng: 36.0633188 }; 
    let map = new google.maps.Map(mapEle, { 
     center: currentLocation, 
     zoom: 16 
    }); 
    } 
} 

HTML:

<ion-content padding> 
<div style="height: 50%; width: 100%" #mapCanvas id="map_canvas"></div> 
</ion-content> 

回答

0

我sloved它通過添加以下代碼:

setTimeout(() =>{ 
     google.maps.event.trigger(map, 'resize') 
     }, 600); 

在負載功能的地圖的聲明之後。

+1

與其使用'setTimeout',您應該使用生命週期鉤子,因爲您無法保證元素是否將在600毫秒內創建。 – echonax

+0

是的,我應該放什麼?你有任何想法 –

+0

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html – echonax