Angular 6中未知的“谷歌未定义”谷歌地图集成答案

【问题标题】：Unknown "google is not defined" Google Maps integration in Angular 6Angular 6中未知的“谷歌未定义”谷歌地图集成
【发布时间】：2019-01-10 19:11:07
【问题描述】：

这是我要解决的问题的背景：我正在尝试对带有热图叠加的谷歌地图集成进行编程。它目前应该是一个以旧金山为中心的可见地图（稍后我将添加一个按钮来覆盖热图并切换热图）。然而，我在控制台中不断收到此错误：

ERROR ReferenceError: google 未定义在 HeatMapComponent.push../src/app/heat/heat-map/heat-map.component.ts.HeatMapComponent.ngOnInit

这是我的角度组件的代码：

热图.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {   } from '@types/googlemaps';



@Component({
selector: 'app-heat-map',
templateUrl: './heat-map.component.html',
styleUrls: ['./heat-map.component.css']
})
export class HeatMapComponent implements OnInit {
  @ViewChild("gmap") gmapElement: any;

  public heatmapData: Array<google.maps.LatLng>;
  public verb: google.maps.LatLng;
  public map: google.maps.Map;

  public heatmap: google.maps.visualization.HeatmapLayer;
  public heatMapON: boolean;

  constructor() { }

  ngOnInit() {
     this.heatmapData = [
        new google.maps.LatLng(37.2, -122.7),
        new google.maps.LatLng(37.2, -122.5),
     ];

     this.cool = new google.maps.LatLng(37.2, -122.04);

     var mapProp = { center: this.cool, zoom: 3, mapTypeId: 
                 google.maps.MapTypeId.SATELLITE };

     this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

     this.heatmap = new google.maps.visualization.HeatmapLayer({
                    data: this.heatmapData
     });

     this.heatMapON = false;
     }

  toggleHeatMap(event){
     console.log("Heat Map is now overlayed on google Map", event)
     this.heatMapON = !this.heatMapON
     if (this.heatMapON) {
        this.heatmap.setMap(this.map);
     }
     else {
        this.heatmap.setMap(null)
     }
  }
}

热图.component.css

 #gmap {
     height: 400px;
     width: 100%;
 }

heat-map.component.html

 <div #gmap></div>
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=visualization">
 </script>

我的本地主机上没有显示此组件。

【问题讨论】：

当您尝试在 ngOnInit() 中调用 Google Maps JavaScript API 时，我怀疑它尚未加载。请注意，您正在异步加载 API，在这种情况下，您应该提供一个回调函数，该回调函数将在 API 完全加载后执行。也许您可以使用 setTimeout() 作为一种解决方法来初始化地图，并在 ngOnInit() 中稍作延迟。

标签： angular typescript google-maps angular-components

【解决方案1】：

问题是在 heat-map.component.html 中调用了地图脚本

它应该在<head> 的项目的 index.html 中引用，此外，我相信在脚本标签上添加的 async 和 defer 属性会导致它不按顺序加载，因此不存在时heat-map.component 正在调用它。

<head>
  <meta charset="utf-8">
  <title>Gmaps</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=visualization"></script>
</head>

defer/async的信息

【讨论】：

我实施了这个修复，现在编译时出现 0 个错误，但地图仍然没有显示。有什么想法吗？
在你的 div 和 css 中使用一个类，确保父级的高度和宽度设置正确，只是我遇到了障碍。 @Enesxg
是的，在 html 中使用 # 会创建一个引用变量，并且在您的 css 中您试图将样式设置为 id，因此它不适用。您可以做的是将 div 设置为 <div id="gmap" #gmap></div> 或（我会使用它）<div class="map-container" #gmap></div> 并将您的 css 选择器更改为 .map-container {height: 400px; width: 100%;}