Angular 谷歌地图响应式调整大小在 IIS 上失败

Question

我正在使用带有 Angular PWA 的 @Angular/[电子邮件受保护] 库。 Angular 版本 16.2.9，节点 18.10.0 当我通过 ng 服务在 localhost 中调试时，一切工作正常，但是当我在 IIS 上部署应用程序时，地图不显示，页面加载了所有其他控件，但地图应占用的空间是白色的。我确信 IIS 可以找到该 css 文件，因为我尝试过更改其他控件中的某些样式。这是我的代码：

.googleMap{
  .map-container {
  width: 100vw;
  height: 81vh;
}
}

@media screen and (orientation: portrait) {
  .googleMap {.map-container {
    width: 100vw;
    height: 81vh;
  }}
}

@media screen and (orientation: landscape) {
  .googleMap { .map-container {
    width: 100vw;
    height: 65vh;
  }}
}

<div class="googleMap">
  <google-map
    [height]="null"
    [width]="null"
  >

Answer 1

我用另一种方式解决了这个问题： 正如我所解释的，上面的代码非常简单，并且在通过 ngserve 在本地主机上进行调试时可以完美运行。但是，我无法使用它，因为一旦在 IIS 中发布，地图就保持白色，我可能认为它采用“null”作为尺寸，但我不能确定，控制台中也不会出现错误。 因此，我通过消除 css 代码并通过 window.innerWidth 和 window.innerHeight 记住屏幕的实际尺寸并使用 Angular Breakpoints 来拦截我在 ngOnInit 中调用的 adjustmentMapResponsive 例程中的方向变化来解决这个问题。 通过这种方式，元素始终占据屏幕的确切空间。

adjustMapResponsive(){
  //this is performed only once
  this.screenWidth = window.innerWidth
  this.screenHeight = window.innerHeight;

  this.screenHeightComp = this.screenHeight
  this.screenWidthComp = this.screenWidth

  this.mapHeight = this.screenHeight
  this.mapWidth = this.screenWidth;

  //this instead is performed at every change of orientation
  this.breakpointObserver$
  .observe(['(orientation: portrait)', '(orientation: landscape)'])
 //When orientation change then invert height and width and vice versa
  .subscribe((state: BreakpointState) => {
    if (state.matches) {
      if (!this.firstLoad) {
      this.screenHeightComp = this.screenHeightComp === this.screenHeight ? this.screenWidth : this.screenHeight;
      this.screenWidthComp =  this.screenWidthComp === this.screenWidth ? this.screenHeight : this.screenWidth;
      this.mapHeight=this.screenHeightComp
      this.mapWidth=this.screenWidthComp
      }
      this.firstLoad=false;
    }
  });
}

  <google-map
    [height]="mapHeight"
    [width]="mapWidth"
  >