动态更改 angular-google-maps 语言

Question

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

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

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

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

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

Answer 1

为了改变地图的语言，需要重新获取一堆本地化的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

我知道很久以前就提出了这个问题，但我会向对解决方案感兴趣的任何人发送 link。它有点复杂，但它适用于 AOT AgmCoreModule - Load Google API KEY Dynamically from Angular service

Answer 4

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

为此，我创建了一个名为 AppInitService 的 class。在这里，我将在我的应用程序中动态初始化各种属性，例如翻译 language/currency 或者，在 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 的示例。我更喜欢静态函数，因为您不必为了使用它们而实例化 class。

动态更改 angular-google-maps 语言

Change angular-google-maps language dynamically

angular-google-maps

angular