Change agm-map google maps API Key dynamic in Angular 7

Question

我正在构建一个允许您编辑地图的应用程序，编辑器有 google 个带有 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>

在最后一个示例中，可以轻松完成，谢谢

Answer 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: [
    {
        provide: APP_INITIALIZER,
        useFactory: agmConfigFactory,
        deps: [HttpClient, LAZY_MAPS_API_CONFIG],
        multi: true
    } 
  ],

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

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

Answer 2

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

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

Change agm-map google maps API Key dynamic in Angular 7

Change agm-map google maps API Key dynamically in Angular 7

javascript

google-maps

angular

agm-map

agm