在AGM Map之前加载谷歌地图api

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

我也使用MapsApiLoader服务解决了这个问题。我需要创建HeatMap，但@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 { }

app.component.html

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

应用程序组件.ts

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

我需要安装@type/googlemaps，并将谷歌地图添加到tsconfig.json中，才能在app.component.ts 中使用var谷歌

tsconfig.app.json

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

演示：StackBLitz