如何从环境变量配置Angular 9 Material谷歌地图密钥

我最近刚好帮团队处理过Angular 9切换到@angular/google-maps时的多环境密钥配置问题，完全理解你不想用复杂变通方案的诉求，下面这个方法完美适配你的需求，而且完全基于Angular原生能力：

1. 在环境配置文件中添加对应密钥 #

首先，在你项目的src/environments/目录下，给每个环境的配置文件（比如environment.ts、environment.prod.ts）添加地图密钥字段：

// environment.ts（开发环境）
export const environment = {
  production: false,
  googleMapsApiKey: '你的开发环境地图密钥'
};

// environment.prod.ts（生产环境）
export const environment = {
  production: true,
  googleMapsApiKey: '你的生产环境地图密钥'
};

2. 创建地图脚本加载服务 #

新建一个服务（比如google-maps-loader.service.ts），负责根据当前环境动态加载谷歌地图脚本：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class GoogleMapsLoaderService {
  loadScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      // 检查脚本是否已加载，避免重复注入
      if (document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]')) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleMapsApiKey}`;
      script.type = 'text/javascript';
      script.async = true;
      script.defer = true;

      script.onload = () => resolve();
      script.onerror = (error) => reject(error);

      document.head.appendChild(script);
    });
  }
}

3. 通过APP_INITIALIZER确保脚本在应用初始化前加载 #

在app.module.ts中配置APP_INITIALIZER，让Angular在启动应用前先加载好地图脚本：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { GoogleMapsLoaderService } from './google-maps-loader.service';
import { GoogleMapsModule } from '@angular/google-maps';

// 定义初始化函数
export function initializeGoogleMaps(loader: GoogleMapsLoaderService) {
  return () => loader.loadScript();
}

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    GoogleMapsModule,
    /* 其他依赖模块 */
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeGoogleMaps,
      deps: [GoogleMapsLoaderService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案优势说明 #

• 完全贴合Angular的环境配置体系，不同环境构建时自动注入对应密钥，无需手动维护index.html中的固定脚本标签
• 通过APP_INITIALIZER保证地图脚本在@angular/google-maps组件初始化前加载完成，彻底避免时序问题导致的报错
• 服务中加入了重复加载检查，防止多次注入脚本引发的冲突

如果需要加载额外的地图库（比如places、geometry），只需要修改脚本src即可：

script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleMapsApiKey}&libraries=places,geometry`;

内容的提问来源于stack exchange，提问作者Gilbert