Question

我正在构建使用google maps api的Angular4项目。我已经构建了一个名为basemap的组件，我在其中包含了google api到jsonp（以便在使用http模块时摆脱交叉原点错误），如下所示（basemap.component.ts）：

if (typeof google === 'undefined') {
// google not available so go fetch it
 this.jsonp.get(`https://maps.googleapis.com/maps/api/js?key=MyKEY&callback=JSONP_CALLBACK`)
    .subscribe(res => {
     // google global object available here
    });
} else {
 //google was fetched before and google global object available here
}

并且效果很好，但是当我使用ngFor在同一页面中多次使用此组件时出现问题

 <div *ngFor="let i of [1,2,3]">  <app-basemap ></app-basemap> </div>

我在控制台中收到以下错误 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

我无法使用此组件AGM - Angular Google Maps，因为我使用leafletjs作为地图可视化api和google突变插件来查看Google基本地图。

Answer 1

对于任何寻找解决方案的人，我都设法使用RXJS来解决问题：我已经按照以下方式创建了一个服务google-api.service.ts：

import { Injectable } from '@angular/core';
import { Jsonp, Headers } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/retry';

@Injectable()
export class GoogleAPIService {
private googleReadyObservable;
constructor(
   private jsonp: Jsonp
) {
  this.googleReadyObservable = new Subject();
  this.jsonp
  .get(`https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=JSONP_CALLBACK`)
  .retry()
  .subscribe(res => {
    if (res.status === 200) {
      this.googleReadyObservable.complete();
    }
  });
 };

googleReady() {
return this.googleReadyObservable;
  };
}

然后在任何组件中foo.component.ts导入服务文件，然后将其注入构造函数

constructor ( 
  private googleAPIService: GoogleAPIService
 ){  }

然后在任何函数中使用它如下：

this.googleAPIService.googleReady()
    .subscribe(
  null,
  err => console.log(err),
  () => {
     // google maps global object loaded
  }
  );

Answer 2

在index.html中提供带有关键字的网址

Angular 2如何在多个组件中使用谷歌地图

2 个答案: