Загрузите googlemaps api перед картой AGM

Question

Я пытаюсь загрузить API карт Google независимо от модуля карт AGM.Я пытаюсь это сделать, потому что в некоторых случаях я хочу получить доступ к API Карт Google без использования модуля AGM.Например, если я хочу загрузить вид улицы, мне нужно позвонить в службу Google Maps, я хочу, чтобы API уже был загружен и готов к использованию.Проблема возникает из-за того, что AgmCoreModule в app.module заботится о загрузке Google API следующим образом:

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

Это хорошо для загрузки карты с использованием компонента AGM.Скрипт добавляется в файл index.html и все работает нормально.Тем не менее, если я хочу получить доступ к API Карт Google без создания экземпляра карты, модуль AGM не добавил скрипт API Google, и "Google" не определено.

Есть ли способ загрузки API Карт Google без использования функции forRoot () в AgmCoreModule?

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 для использования var google в app.component.ts

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