angular - 如何使用 Angular agm 来使用谷歌地图热图功能

Question

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

Answer 1

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

1. 安装 agm 和 googlemaps 类型:

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

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

"types": [
    "google"
]

3. 配置 agm 模块时，将可视化附加到您的 api key 。例如:

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

首先确保您的 map 在没有热图代码(例如设置高度、API key 等)的情况下正常工作。