角度谷歌地图HeatmapLayer未定义

Question

我正试图创建一个热图，但在运行应用程序时，它确实向我显示了一个图，但heatLayer没有显示，在控制台中我收到一条错误消息，说heatmapLayer未定义。在进一步研究这个问题时，我发现在console.log(google.map)上它给了我不同的对象，但其中不存在visualizing对象。这是代码

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

我已经在模块中添加了libraries: ["visualization"]和我的谷歌apiKey，但它仍然不能在中工作

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>