Angular Google Maps 模块在本地渲染，但不在生产环境中答案

【问题标题】：Angular Google Maps module rendering in local but not in productionAngular Google Maps 模块在本地渲染，但不在生产环境中
【发布时间】：2023-03-17 20:24:02
【问题描述】：

我有一个使用官方 Angular 谷歌地图模块的小应用程序。它在我的本地环境中创造了奇迹，但在生产中它只会显示一个灰色窗口。检查代码，地图、标记和信息窗口都在那里，但没有呈现任何内容。

在生产中我没有收到加载错误，但是当我尝试放大地图时出现以下错误：

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'zoom' of null
at ev (map.js:4)
at HTMLDivElement.<anonymous> (map.js:3)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:167)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
at invokeTask (zone-evergreen.js:1621)
at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1647)

这是我的代码：

import { MapInfoWindow  } from '@angular/google-maps'

export class ExhibitorDetailsComponent implements OnInit, AfterViewInit {


  // Map stuffs

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  openInfo(marker: MapMarker, content) {
    this.infoWindow.open(marker)
  }

  zoom = 14
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    maxZoom: 15,
    minZoom: 8,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    rotateControl: true,
    fullscreenControl: true,

  }

  markers = [{
    position: {
      lat: 52.5504827,
      lng: 13.4015135,
    },
    title: 'Marker title ',
    clickable: true,
    options: {  },
  }]

  lat = this.markers[0].position.lat;
  lng = this.markers[0].position.lng;



  // Open marker info window on load

  @ViewChild('markerElem') markerElem;

  ngAfterViewInit() { 

    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        lat: 52.5504827,
        lng: 13.4015135,
      }
    })

    this.openInfo(this.markerElem, "");

  }


  // On Init

  ngOnInit(): void {

    this.route.paramMap.subscribe(params => {
      let item = params.get('exhibitorId')
      console.log(item);
      this.exhibitor = exhibitors.find(x => x.doc.slug === item);
      console.log(this.exhibitor);
    });
  }


}

在前面：

<google-map height="100%" width="100%" [zoom]="zoom" [center]="center" [options]="options">
      <map-info-window>{{exhibitor.doc.galleryname}} <br><a href="https://www.google.com/maps/dir//'+{{lat}},{{lng}}'/@52.5504827,13.4015135,13z/" target="_blank">Get direction</a></map-info-window>
      <map-marker class="marrrker" id="markerclick" #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, '')">
      </map-marker>
    </google-map>

到目前为止我已经尝试过什么：

提到的所有内容here。包括：
降级到 9.1.3
使用定义的 mapTypeId 进行初始化
地图不在隐藏容器中
彻底改变容器和 CSS

关于这个谜团的任何指针？

编辑：尝试王子的回答

这就是现在的样子。还是一样的问题！

import { Component, OnInit, Input, ViewChild, AfterViewInit,ElementRef, Renderer2   } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { GoogleMapsModule } from '@angular/google-maps'
import { MapMarker  } from '@angular/google-maps'
import { MapInfoWindow  } from '@angular/google-maps'


@Component({
  selector: 'app-exhibitor-details',
  templateUrl: './exhibitor-details.component.html',
  styleUrls: ['./exhibitor-details.component.scss']
})

export class ExhibitorDetailsComponent implements OnInit, AfterViewInit {


  // Map stuffs

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  openInfo(marker: MapMarker, content) {
    this.infoWindow.open(marker)
  }

  'zoom' = 14
  'mapTypeId': google.maps.MapTypeId;
  'center': {
    'lat': 52.5504827,
    'lng': 13.4015135
  }
  'options': google.maps.MapOptions = {
    'zoomControl': true,
    'scrollwheel': true,
    'disableDoubleClickZoom': false,
    'maxZoom': 15,
    'minZoom': 8,
    'mapTypeControl': false,
    'scaleControl': false,
    'streetViewControl': false,
    'rotateControl': false,
    'fullscreenControl': false,


  }

  'markers' = [{
    'position': {
      'lat': 52.5504827,
      'lng': 13.4015135,
    },
    'title': 'Marker title ',
    'clickable': true,
    'options': {  },
  }]

  'lat' = this.markers[0].position.lat;
  'lng' = this.markers[0].position.lng;


  // Open marker info window on load

  @ViewChild('markerElem') markerElem;



  ngAfterViewInit() { 

    setTimeout(() => {
       this.mapTypeId = google.maps.MapTypeId.ROADMAP;
     }, 3000);


    setTimeout(() => {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          'lat': 52.5504827,
          'lng': 13.4015135,
        }
      })
     }, 3000);

    this.openInfo(this.markerElem, "");

  }



  // On Init

  ngOnInit(): void {

    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        'lat': 52.5504827,
        'lng': 13.4015135,
      }
    })


  }


}

【问题讨论】：

如果您没有为生产环境指定不同/无 API 密钥，请先检查
@Marek 是的！当我限制域时，会出现错误。当我打开限制时，没有错误，从谷歌的角度来看它正在加载（我还在云仪表板中看到了请求）。它只是不渲染。
当您使用不受限制的 API 密钥时，您的地图是否正在加载并且没有出现错误？
你能发布你的控制台输出吗？
要尝试的事情：将开发版本部署到产品。在本地，检查（使用 chrome 开发工具）在 prod 中为灰色的元素并将 break 放在 -> 修改上。一旦断点被命中，检查调用堆栈。熟悉一下预期的流程，然后在sources下找到option-shift-f来搜索prod中的类似接触点。比较和对比流量和值。如果 google lib 不可能被丑化，请考虑拉下并构建一个非缩小版本。最后，既然这是产品，请考虑是否可以向我们发送链接以供我们自己查看。

标签： angular google-maps-api-3 angular-google-maps

【解决方案1】：

存在 settimeout 的部分代码存在问题！

this.openInfo(this.markerElem, "") 将在你的两个 setTimeouts 中的代码之前很久执行！

代替 ngAfter ngAfterViewInit，试试这个：

isMapInitiated = false;
 ...
ngAfterViewChecked() { 
 if( !this.isMapInitiated ) {
    setTimeout(() => {
       this.mapTypeId = google.maps.MapTypeId.ROADMAP;
       navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          'lat': 52.5504827,
          'lng': 13.4015135,
        }
     this.openInfo(this.markerElem, "");
     this.isMapInitiated = true;
     }, 3000);
  }

}

3000 取决于必要的 Google JS 文件的收费级别！如果它在组件启动之前充电，您可以将其设置为0。

【讨论】：

【解决方案2】：

我很久以前就遇到过类似的问题。具体记不清了。您是否尝试过以 px 而不是百分比设置宽度和高度。或者以像素为单位添加 max-width 和 max-height。

【讨论】：