在Angular 7中动态更改agm-map google maps API Key答案

【问题标题】：Change agm-map google maps API Key dynamically in Angular 7在Angular 7中动态更改agm-map google maps API Key
【发布时间】：2022-03-06 01:27:38
【问题描述】：

我正在构建一个可以让您编辑地图的应用程序，编辑器有带有 Agm 地图模块的谷歌地图，用户的最终结果是一个 iframe，其地图嵌入到他的网页中。我正在为编辑器使用该模块，并在 app.module.ts 中使用我的 API 密钥导入它。

import { AgmCoreModule } from '@agm/core';
...
imports: [
 ...
 AgmCoreModule.forRoot({
   apiKey: 'YOUR_KEY'
 })
]

iframe 将是一个使用相同后端的独立 Angular 应用程序。我需要将从数据库中获取的用户 API 密钥，但我无法理解如何在 Angular 中构建这部分，似乎它使用 api 密钥创建构建，是否可以这样做以某种方式在运行时修改密钥？我已经看到它在 jQuery 中完成。在哪里可以从脚本标签中的代码中获取，或者在 vanilla js 中，一个例子：

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

在最后一个例子中，它可以很容易地完成，谢谢

【问题讨论】：

标签： javascript angular google-maps agm agm-map

【解决方案1】：

我确实立即解决了它，在我的情况下，我使用此代码从 API 获得了密钥

import { AgmCoreModule, LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } 
from '@agm/core';

export function agmConfigFactory(http: HttpClient, config: LazyMapsAPILoaderConfigLiteral) {
    const id = window.location.pathname.replace(/\//g, "");
    return () => http.get<any>(`${environment.baseUrl}/map-display/${id}`).pipe(
        map(response => {
            config.apiKey = response.key;
            return response;
        })
    ).toPromise();
}

api调用的内容和id可以替换成想要的key。

import { AgmCoreModule, LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } 
from '@agm/core';

@Injectable()
export class GoogleMapsConfig implements LazyMapsAPILoaderConfigLiteral {
  apiKey: string = CONFIG.googleMapsAPIKey;
}

你必须在@NgModule 中的providers 数组中添加一个指定函数的provider，在我的例子中：

  providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: agmConfigFactory,
        deps: [HttpClient, LAZY_MAPS_API_CONFIG],
        multi: true
    } 
  ],

对于我展示的通用示例，您可以用 useClass 代替 useFactory。你仍然需要在@NgModule的imports数组中提供一个初始键，它可以是一个无意义的字符串

    AgmCoreModule.forRoot({ apiKey: "initialKey"}),

【讨论】：

您能更好地解释您的解决方案吗？目前，无法执行

【解决方案2】：

添加到上面的答案，添加下面以使自动完成工作

AgmCoreModule.forRoot({
  apiKey: 'initialKey',
  language: 'en',
  libraries: ['places']
}),

【讨论】：