Google 地图在页面导航时显示部分地图

Question

<google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%">
  <map-marker
    #marker="mapMarker"
    *ngFor="let mapPinAddressMarkerPosition of location?.googleMap?.mapPinAddressMarkerPositions"
    [position]="mapPinAddressMarkerPosition?.markerPosition"
    [options]="mapPinAddressMarkerPosition?.markerOptions"
   >
  </map-marker>

  
</google-map>

第一次运行正常。但我的问题是，如果我进行任何页面导航并返回到“地图”选项卡，那么它会显示地图的一部分。你知道为什么吗？

Note:

以上情况发生在我身上当我按下标记针时，它以编程方式重定向到另一个标签页，然后再次尝试按下地图标签。例如this.router.navigateByUrl('tabs/leads') 单击固定图标后。

Answer 1

我创建了一个样板离子标签项目，并使用相同的 angular 库将 google 映射指令放在第一个标签页上。我能够通过将地图选项对象包装在 NgAfterViewInit 生命周期方法中并在加载选项对象时加载 google 地图指令来使其工作。请参见下面的代码示例：

注意：我确信除了 null/AfterViewInit 方法之外还有更好的方法，但这是我第一次尝试通过怀疑生命周期问题来解决。我会在尝试其他方法后更新此答案。

Tab1.html

  <div if="options != null">
    <google-map [options]="options"></google-map>
  </div>

Tab1.ts

export class Tab1Page implements AfterViewInit  {
  
  options: any = null;

  constructor() {}
 
  ngAfterViewInit() {
    options: google.maps.MapOptions = {
      center: {lat: 40, lng: -20},
      zoom: 4
    };
  }
}

Google 地图在页面导航时显示部分地图

Google map shows part of the map when page navigations

google-maps

typescript

ionic-framework

angular