Angular 在AGM地图之前加载Google地图api

我正在尝试独立于AGM地图模块加载google地图API。我之所以这么做，是因为在某些情况下，我想不使用AGM模块而访问Google Maps API。例如，如果我想加载街景，我需要调用GoogleMaps服务，我希望API已经加载并可以使用。出现问题的原因是app.module中的AgmCoreModule负责加载Google API，如下所示：

    AgmCoreModule.forRoot({
        apiKey: 'API_KEY',
        libraries: ['places', 'drawing', 'geometry']
    })

这适用于使用AGM组件加载地图。脚本被附加到index.html文件中，一切正常。但是，如果我想在没有实例化地图的情况下访问Google Maps API，AGM模块没有附加Google API脚本，“Google”是未定义的

---

有没有一种方法可以在不使用AgmCoreModule上的forRoot（）函数的情况下加载Google Maps API？

我通过使用MapsApiLoader服务解决了这个问题。无需触摸app.module中的任何内容，也无需更改AgmCoreModule的初始化方式

import { MapsAPILoader } from '@agm/core';


 constructor(
    private _mapsAPILoader: MapsAPILoader
  ) { }

this._mapsAPILoader.load().then(() => {
  //do stuff here
});

---

我也通过使用MapsApiLoader服务解决了这个问题。我需要创建HealtMap，但是@agm/core没有支持，然后我用它加载googleMapsApi并创建了一个映射

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';

import { environment } from 'environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: environment['apiKeyMaps'],
      libraries: ['visualization'],
    }),
  ],
  providers: [
    GoogleMapsAPIWrapper,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, ViewChild, AfterContentInit } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

declare var google: any;

interface Marker {
  lat: number;
  lng: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterContentInit {

  @ViewChild('gmap') gmapElement: any;

  map: google.maps.Map;
  heatmap: google.maps.visualization.HeatmapLayer;

  constructor(
    private mapsApiLoader: MapsAPILoader,
  ) { }

  ngAfterContentInit(): void {
    this.mapsApiLoader.load().then(() => {
      this.initMap();
    });
  }

  initMap() {
    this.map = new google.maps.Map(this.gmapElement.nativeElement, {
      zoom: 3.5,
      center: new google.maps.LatLng(-14, -54),
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoomControl: false,
      streetViewControl: false,
      disableDefaultUI: true,
    });

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

app.component.html

<div #gmap class="map-heat-container" style="height: 500px; width: 500px"></div>

我需要安装@type/googlemaps并将googlemaps添加到tsconfig.json中，以便在app.component.ts中使用var google

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

演示：