Angular google 地图 HeatmapLayer 未定义

Question

我正在尝试创建热图，但在运行上，应用程序确实向我显示了地图，但 heatLayer 未显示，并且在控制台中我收到一条错误消息，指出 heatmapLayer 未定义。在进一步调查该问题时，我发现在 console.log(google.map) 上它给了我不同的对象，但 visualizing 对象不存在于其中。我关注了 this stackblitz。这是代码

Html

<div class="fuse-card auto-width p-16">
    <div #gmap class="map-heat-container" style="height: 500px; width: 500px"></div>
</div>

组件

 map: google.maps.Map;
 heatmap: google.maps.visualization.HeatmapLayer;   
ngOnInit() {
this.map = new google.maps.Map(this.gmapElement.nativeElement, {
              zoom: 3.5,
              center: new google.maps.LatLng(31.5204, 74.3587),
              mapTypeId: google.maps.MapTypeId.SATELLITE,
              zoomControl: false,
              streetViewControl: false,
              disableDefaultUI: true,
            });
            console.log(google.maps.visualization);
            this.heatmap = new google.maps.visualization.HeatmapLayer({
              data: this.getPoints(),
              map: this.map,
            });
  } 

  getPoints() {
    // create points
    let markers: Marker[] = [
      { lat: -23, lng: -46 },
      { lat: -24, lng: -53 },
      { lat: -23, lng: -46 },
    ];

    // transforming points
    return markers.map((point) => new google.maps.LatLng(point.lat, point.lng));
  }

我已经在模块中用我的 google apiKey 添加了 libraries: ["visualization"]，但它仍然不起作用

 AgmCoreModule.forRoot({
      apiKey: "myApiKey",
      libraries: ["visualization"],
    }),

Answer 1

问题出在 index.html 文件中的地图 cdn。 cdn 包含几何和位置库，但不包含可视化库。所以我再次更新了那个 cdn 和运行应用程序并且它工作了。但可视化库应该是第一个，在几何和位置之前导入才能生效。

<script
    src="https://maps.googleapis.com/maps/api/js?key=xxxxw&libraries=visualization&geometry&places&language=en">
</script>

Angular google 地图 HeatmapLayer 未定义

Angular google maps HeatmapLayer undefined

angular

google-maps

angular-google-maps