在 AGM 地图之前加载 googlemaps api答案

【问题标题】：Load googlemaps api before AGM Map在 AGM 地图之前加载 googlemaps api
【发布时间】：2018-12-11 16:43:13
【问题描述】：

我正在尝试独立于 AGM 地图模块加载谷歌地图 API。我正在尝试这样做，因为在某些情况下，我想在不使用 AGM 模块的情况下访问 Google Maps API。例如，如果我想加载街景，我需要调用 Google 地图服务，我希望 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？

【问题讨论】：

标签： angular google-maps

【解决方案1】：

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

app.module.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>

app.component.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 并将 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"
  ]
}

演示： StackBLitz

【讨论】：

【解决方案2】：

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

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


 constructor(
    private _mapsAPILoader: MapsAPILoader
  ) { }

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

【讨论】：

更便捷的解决方案，无需触摸app模块