Question

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

Answer 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

Answer 2

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

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


 constructor(
    private _mapsAPILoader: MapsAPILoader
  ) { }

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

在AGM地图之前加载googlemaps API

2 个答案: