时间戳

首页 > 解决方案 > Angular Google Maps 模块在本地渲染，但不在生产环境中

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

问题描述

我有一个使用官方 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>

到目前为止我所尝试的：

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

编辑：尝试王子的回答

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

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


  }


}

在此处输入图像描述

在此处输入图像描述

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

解决方案

存在 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。

推荐阅读