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

Posted 2023-03-16

【中文标题】谷歌地图在页面导航时显示部分地图

【英文标题】：Google map shows part of the map when page navigations

【发布时间】：2021-12-06 14:22:42

【问题描述】：

我曾经像这样使用Angular Google map component：

<google-map [options]="location?.googleMap?.mapOptions"  >
  <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') 点击 Pin 图后。

【问题讨论】：

我刚刚创建了一个标签离子项目，并使用相同的角度库将地图放在第一个标签页中。我没有遇到任何问题。我将地图选项对象的渲染放在 NgAfterViewInit 生命周期方法中，并且仅在对象准备好时才渲染 goog-map 指令。尝试这样的事情，让我知道这是否适合你。

@leewhitbeck 请在答案部分放一个小代码/伪代码。那我试试。

没问题。我现在就这样做

【参考方案1】：

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

注意：我确信除了 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
    ;
  

【讨论】：

非常感谢您的指导。我在这里使用带有async 管道的反应式架构。但是我的用例中的问题是google-map 加载问题。这是一个很大的帮助。