ionic v4 angular-router，如何隐藏恢复google地图之间的视图导航

Question

当我使用MapComponent导航到视图或从视图导航时，我正在尝试重用相同的google.maps.Map实例。当我离开/销毁MapCompnent时，我将google map DOM元素隐藏在一个DIV.style={display:none}中

  ngOnDestroy() {
    google.maps.event.clearInstanceListeners(this.map);
    const parent = this.element.nativeElement;
    let stash = document.getElementById('stash-google-maps');
    if (!stash) {
      stash = this.renderer.createElement('DIV');
      stash.id = 'stash-google-maps';
      stash.style.display = "none";
      // stash.style.opacity = "0";
      this.renderer.appendChild(this._document.body, stash);
    }
    while (parent.childNodes.length > 0) {
      stash.appendChild(parent.childNodes[0]);
    } 
  }

当我导航回到视图时，我将google map DOM元素移回MapComponent html。一切似乎都很好，除了贴图大小错误。地图正在新的包含DIV的外部绘制瓷砖。

我试图调用google.maps.event.trigger(this.map, 'resize');，但这似乎在当前的v3.34API中已被弃用。

我该怎么办？

Answer 1

事实证明new google.maps.Map( el, options)正在添加

  position: relative;
  overflow: hidden;

添加到父元素el