Angular Google Maps模块在本地而不是在生产中呈现

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Eric Mitjans想要引起更多关注对此问题。

我有一个使用Angular Google Maps官方模块的小型应用程序。它可以在我的本地环境中运行奇迹，但在生产中它将仅显示一个灰色窗口。检查代码，地图，标记和信息窗口都在那儿，但是什么都没有呈现。

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

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,
      }
    })


  }


}

我有一个使用Angular Google Maps官方模块的小型应用程序。它可以在我的本地环境中运行奇迹，但在生产中它将仅显示一个灰色窗口。检查代码，地图，标记...

Answer 1

这是因为代码在生产环境中变得越来越小，并且还修改了对象属性名称。这是生产环境中错误的主要原因。