角形Google Maps HeatmapLayer未定义

问题描述

我正在尝试创建热图，但是在运行应用程序时，它确实向我显示了一个热图，但未显示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,];

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

我在模块中添加了libraries: ["visualization"]和我的Google ApiKey，但仍然不起作用

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

解决方法

问题出在index.html文件中的maps cdn。 CDN包含几何和位置库，但不包含可视化库。因此，我更新了该CDN并再次运行了该应用程序，它开始工作了。但是可视化库应该是第一个，并在几何图形和放置位置之前导入，以使其生效。

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

angular angular-google-maps google-maps