如何使用 Angular agm 使用谷歌地图热图功能答案

【问题标题】：how to use google maps heatmap feature using angular agm如何使用 Angular agm 使用谷歌地图热图功能
【发布时间】：2018-02-22 03:36:15
【问题描述】：

我正在使用 https://github.com/SebastianM/angular-google-maps 的角度组件 @agm/core 用于我最新的 angular 5 项目以显示谷歌地图。效果很好，现在我想从可视化库中添加谷歌地图热图图层。我不知道该怎么做。请帮忙

【问题讨论】：

我发现有人在 github 问题论坛中已经发布了一个问题。 @agm/core 似乎还不支持热图层。我决定探索纯谷歌地图 api js 路线。 github.com/SebastianM/angular-google-maps/issues/1289

标签： angular google-maps-api-3

【解决方案1】：

以下步骤对我有用（注意经过长时间的搜索，我没有找到其他示例）。

1。安装 agm 和 googlemaps 类型：

npm install @agm/core --save
npm install @types/googlemaps --save-dev

2。将“google”添加到 tsconfig 中 compilerOptions 内的类型数组。例如：

"types": [
    "google"
]

3。配置 agm 模块时，将可视化附加到您的 api 密钥。例如：

AgmCoreModule.forRoot({
    apiKey: '...' + '&libraries=visualization'
})

4。在您的组件 html 中：

<agm-map [latitude]="..." [longitude]="..." (mapReady)="onMapLoad($event)">
</agm-map>

5。在您的组件 ts 中：

private map: google.maps.Map = null;
private heatmap: google.maps.visualization.HeatmapLayer = null;

...

onMapLoad(mapInstance: google.maps.Map) {
    this.map = mapInstance;

    // here our in other method after you get the coords; but make sure map is loaded

    const coords: google.maps.LatLng[] = ...; // can also be a google.maps.MVCArray with LatLng[] inside    
    this.heatmap = new google.maps.visualization.HeatmapLayer({
        map: this.map,
        data: coords
    });
}

首先确保您的地图在没有热图代码的情况下正常工作（例如，设置高度、api 键等）。

【讨论】：

关于第 2 步。它应该是“googlemaps”而不是“google”
而不是附加库，您可以简单地使用libraries 的LazyMapsAPILoaderConfigLiteral 键
我需要 'import {} from 'googlemaps';'供我编译

【解决方案2】：

不要附加您的 api 密钥，而是使用 app.module.ts 中 AgmCoreModule 的 library 密钥来导入可视化库，如下所示：

AgmCoreModule.forRoot({
  apiKey: environment.googleMapsAPIKey,
  libraries: ['visualization'],
}),

【讨论】：

【解决方案3】：

如果您看到类似的内容：

@types/googlemaps/index.d.ts is not a module

只需在您的 src 目录中直接创建一个名为 index.d.ts 的文件并添加以下行：

declare module 'googlemaps';

【讨论】：

【解决方案4】：

感谢 André Mantas 的解决方案

我遇到了许多与“google”类型相关的问题。所以，我将这一行添加到组件控制器中

declare var google: any;

private map: any;
private heatmap: any;

成功了

【讨论】：