Question

语言更改时是否可以动态更改地图语言？或者至少在我下次访问语言地图时更改语言地图（语言更改后）。

我可以使用此代码（在mymap.module.ts中）设置地图加载时的默认语言：

@NgModule({ imports: [ 
  AgmCoreModule.forRoot({ apiKey: 'MY_KEY',
  language: 'es', }),
  ]
})

我可以使用this.translate.currentLang（在mymap.component.ts中）获取当前语言。

但我不知道如何将两者结合起来。

Answer 1

为了更改map的语言，需要重新获取一堆本地化的JS脚本。因此，您可以尝试刷新整个页面（JS而非Angular），通过本地存储提供所需语言，例如：

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot({ 
      apiKey: 'MY_KEY',
      language: localStorage && localStorage.gml || 'en'
    }),
  ]
})

要重新加载您的网页，请使用window.location.reload()方法

StackBLITZ：https://stackblitz.com/edit/angular-google-maps-demo-f3xzhn?file=app%2Fapp.module.ts

Answer 2

在app.component中添加以下内容，确保更改语言后更新本地存储中的“ lang”并使用window.location.reload（）重新加载页面

export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit() {

    var script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?v=quarterly&key=${KEY}&libraries=places&language=${localStorage && localStorage.lang || 'en'}`;
    document.head.appendChild(script);
  }
}

在相关模块中添加：

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot(),
  ]
})

Answer 3

我知道这个问题很久以前就被提出过，但我会向任何对解决方案感兴趣的人发送链接。它有点复杂，但它与 AOT 一起工作得很好 AgmCoreModule - Load Google API KEY Dynamically from Angular service

Answer 4

我需要做一些类似的事情，动态加载语言和 API 密钥。

为此，我创建了一个名为 AppInitService 的类。在这里，我将在我的应用中即时初始化各种属性，例如翻译语言/货币，或者在 AGM 的情况下，API 密钥和语言。

在您的 app.module.ts 或您使用的任何内容中，您将添加以下提供程序：

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

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      // The apiKey must always be set, even if empty.
      apiKey: 'MyApiKey'
    })
  ],
  providers: [
    {
      // APP_INITIALIZER is the Angular dependency injection token.
      provide: APP_INITIALIZER,
      // Pass in the AGM dependency injection token.
      deps: [LAZY_MAPS_API_CONFIG],
      // Allow for multiple startup injectors if needed.
      multi: true,
      // UseFactory provides Angular with the function to invoke.
      useFactory: (googleMapsConfig: LazyMapsAPILoaderConfigLiteral) => () => AppInitService.Init(googleMapsConfig)
    }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

然后在 AppInitService.ts 中：

import { Injectable } from '@angular/core';
import { LazyMapsAPILoaderConfigLiteral } from '@agm/core';

@Injectable()
export class AppInitService {
  public static Init(googleMapsConfig: LazyMapsAPILoaderConfigLiteral) : Promise<void> {
    return new Promise<void>((resolve, reject) => {

      // Here you'll put in your call to retrieve your language code.
      const languageCode = GetMyLanguageCode();

      // And now we set it.
      googleMapsConfig.language = languageCode;

      // Resolve the promise as we're done.
      resolve();
    });
  }
}

有一个示例说明如何使用 Angular 应用程序初始化 here。不过我更喜欢静态函数，因为您不必实例化类即可使用它们。

动态更改angular-google-maps语言

4 个答案: