Angular 2如何在多個組件中使用谷歌地圖

我正在構建使用谷歌地圖API的Angular4項目。我已經建立了一個叫做底圖部分中，我已經包括通過JSONP谷歌的API（使用HTTP模塊時，擺脫跨起源錯誤的）如下（basemap.component.ts）：Angular 2如何在多個組件中使用谷歌地圖

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和谷歌突變插件來查看谷歌底圖。

來源

2017-07-23 Mohammed Essehemy

怎麼樣？ – Vega

@Vega這實際上是我使用的。 –

不，你的版本是它不是一樣的 – Vega

對於任何一個誰前來尋找解決方案，我已經成功使用RXJS來解決問題：我創建了一個服務谷歌，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 
    } 
);

來源

2017-07-23 19:04:39

Angular 2如何在多個組件中使用谷歌地圖

回答

相關問題