Google maps 从angular 2服务设置google map API密钥

我在angular 2应用程序中使用sebastine谷歌地图。我知道AgmCoreModule.forRoot（{apiKey:“xxxxxxxx”}）可以用来设置API键，但我需要在@component中的angular服务中设置API键。是否可能…需要帮助。

您可能需要更新并提供如下自定义提供程序：{provide:MapsAPILoader，useClass:CustomLazyAPIKeyLoader}导入AgmCoreModule的位置

在

CustomLazyAPIKeyLoader

类中重写load方法

从'@angular/core'导入{Injectable，injection}；
从'@angular/Http'导入{Http，Response，Headers，RequestOptions}；
从“angular2 google MAPS/core”导入{MapsAPILoader、Lazymapsapiloader、LazymapsLoaderConfig、GoogleMapsScriptProtocol}；
从“angular2 google maps/core/utils/browser globals”导入{DocumentRef，WindowRef}；
@可注射（）
导出类CustomLazyAPIKeyLoader扩展了MapsAPILoader{
private_scriptLoadingPromise：承诺；
私有配置：LazymapsapiLoaderConfig；
私有_windowRef:windowRef；
私有_documentRef:documentRef；
构造函数（@Inject（LAZY\u MAPS\u API\u CONFIG）CONFIG:any，w:WindowRef，d:DocumentRef，private http:http）{
超级（）；
这个._config=config | |{}；
这是.\u windowRef=w；
这一点。_documentRef=d；
}
load（）：承诺{
如果（本._脚本加载承诺）{
返回此。\u scriptLoadingPromise；
}
const script=this.\u documentRef.getNativeDocument（）.createElement（'script'）；
script.type='text/javascript'；
script.async=true；
script.defer=true；
const callbackName:string=`angular2GoogleMapsLazyMapsAPILoader`；
this.http.get（“getKey”）
.订阅（（res:any）=>{
这个._config.apiKey=res._body；
script.src=this.\u getScriptSrc（callbackName）；
此.u documentRef.getNativeDocument（）.body.appendChild（脚本）；
});
此._scriptLoadingPromise=新承诺（（解析：函数，拒绝：函数）=>{
（this._windowRef.getNativeWindow（））[callbackName]=（）=>{console.log（“已加载”）；resolve（）；}；
script.onerror=（错误：事件）=>{reject（error）；}；
});
返回此。\u scriptLoadingPromise；
}
private _getScriptSrc（callbackName:string）：string{
let原型：googlemapscriptprotocol=
（this._config&&this._config.protocol）| | | googlemapscriptprotocol.HTTPS；
let协议：字符串；
开关（原型）{
case GoogleMapsScriptProtocol.AUTO：
协议=''；
打破
case GoogleMapsScriptProtocol.HTTP:
协议='http:'；
打破
案例GoogleMapsScriptProtocol.HTTPS：
协议='https:'；
打破
}
const hostAndPath:string=this._config.hostAndPath | |'maps.googleapis.com/maps/api/js'；
常量查询参数：{[key:string]：string | Array}={
v:这个._config.apiVersion | | |“3”，
回调：callbackName，
key:this.\u config.apiKey，
客户机：这个。_config.clientId，
channel:this.\u config.channel，
库：这个。_config.libraries，
region:此._config.region，
语言：this.\u config.language
};
常量参数：字符串=
Object.key（查询参数）
.filter（（k:string）=>queryParams[k]！=null）
.filter（（k:string）=>{
//删除空数组
return！Array.isArray（queryParams[k]）||
（Array.isArray（queryParams[k]）&&queryParams[k].length>0）；
})
.map（（k:string）=>{
//将数组作为逗号分隔的字符串连接
设i=queryParams[k]；
if（数组isArray（i））{
返回{key:k，value:i.join（'，'）}；
}
返回{key:k，value:queryParams[k]}；
})
.map（（条目：{key:string，value:string}）=>{return`${entry.key}=${entry.value}`；}）
.加入（“&”）；
返回`${protocol}/${hostAndPath}？${params}`；
}
}

我添加了一个解析器来获取API密钥

从'@angular/router'导入{Resolve，ActivatedRouteSnapshot}
从“@angular/core”导入{Injectable，injection}
从“../services/some.service”导入{SomeService}
从“@agm/core”导入{LazyMapsAPILoaderConfigLiteral，LAZY_MAPS_API_CONFIG}
从'rxjs'导入{可观察的}
从“rxjs/operators”导入{map，catchError}
@可注射（）
导出类GoogleMapAPiResolver实现解析{
建造师(
私人服务：私人服务，
@注入（惰性映射API配置）
私有配置：LazymapsapiLoaderConfig
) {}
解析（路由器：ActivatedRouteSnapshot）：可观察{
返回此.someService.getGoogleMapApiKey（）.pipe(
catchError（错误=>{
返回（假）
}),
映射（响应=>{
this.config.apiKey=响应
返回真值
})
)
}
}

您已将API密钥放入

app.module.ts

下的

@NgModule

并确保在google云控制台中启用Maps JavaScript API 谢谢

---

我正在通过angular service从web服务调用中获取API密钥…感谢您的帮助。。。。

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    AgmCoreModule.forRoot({
      // please get your own API key here:
      // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en
      apiKey: 'API_KEY'
    })
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }