使用ionic2映射javascript api无法正常工作答案

【问题标题】：map javascript api with ionic2 not working well使用ionic2映射javascript api无法正常工作
【发布时间】：2017-05-25 10:01:03
【问题描述】：

我正在使用带有 ionic2 的 map javascript API，当我第一次输入地图所在的表单时一切正常，但是如果我返回然后返回到地图所在的同一表单，则地图不会出现，只出现全屏的[]图标和google word，不知道为什么？
当我打开完整的地图时，它会正常显示。有点奇怪。

 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>

【问题讨论】：

标签： javascript cordova angular ionic2

【解决方案1】：

我通过添加此代码来解决它：

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

在加载函数中声明地图之后。

【讨论】：

你应该使用生命周期钩子而不是使用setTimeout，因为你不能保证元素是否会在 600 毫秒内创建。