如何使用角agm使用google地图热图功能

Question

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

Answer 1

下面的步骤对我起了作用(注意，经过长时间的搜索，我还没有找到其他示例)。

1. 安装agm和googlemaps类型：

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

1. 在tsconfig中的compilerOptions中将"google“添加到类型数组中。例：

"types": [
    "google"
]

1. 配置agm模块时，将可视化附加到您的api键中。例：

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

1. 在组件html中：

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

1. 在组件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键等)。

Answer 2

与其追加api键，不如使用AgmCoreModule在app.module.ts中的库键导入可视化库，如下所示：

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

Answer 3

如果你看到这样的事情：

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

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

declare module 'googlemaps';