使用angular-google-maps动态添加语言/区域设置？

Question

我想使用angular-google-maps动态添加语言。语言是动态的，可以从screen.locale中检索。我的应用程序是基于区域设置的，当用户选择不同的语言时，一切都会改变。问题是谷歌地图的城市也不会因为语言而改变，我在ui-gmap- google -map中没有发现任何地区标签。我可以使用下面的代码片段吗？

我使用的是Angular v1：

  <ui-gmap-google-map 
    center="question.map.initialcoords"  
    zoom="question.map.zoom" 
    pan="false" 
    control="question.map.control"
    options="question.map.options"
    >

      <ui-gmap-markers 
        idKey="'id'"
        models="question.markers" 
        coords="'coords'" 
        fit="true" 
        icon="'iconpath'"
        options="'options'" 
        >
        <ui-gmap-windows isIconVisibleOnClick="true" show="showwindow()">
          <div ng-non-bindable>
            {{title}}
          </div>
        </ui-gmap-windows>
      </ui-gmap-markers>
  </ui-gmap-google-map>

Answer 1

为了替换语言，你应该首先删除脚本和谷歌地图，然后再次生成它，并等待一段时间，直到它被重新加载，你可以这样做：

async loadScript() {
var oldScript = document.getElementById("agmGoogleMapsApiScript");
if (oldScript !== null) {
  oldScript.parentNode.removeChild(oldScript);
  delete google.maps;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://maps.googleapis.com/maps/api/js? 
v=3&key={{YourApiKey}}&region=israel&language= 
{{language}}';
script.id = "agmGoogleMapsApiScript";
document.body.appendChild(script);
await new Promise(resolve => setTimeout(resolve, 1000));
}

然后，您应该重新加载agm-core映射，您可以通过退出组件来执行此操作。

最后，创建将触发该函数的视图。

别忘了声明google，就像这样：

declare var google: any;

对我来说很有效，希望它能有所帮助:)

Answer 2

不再积极维护此项目

[https://github.com/angular-ui/angular-google-maps][1]

使用年度股东大会与谷歌地图一起工作。它非常容易使用。

[https://angular-maps.com/guides/getting-started][2]

ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title: string = 'My first AGM project';
  lat: number = 51.678418;
  lng: number = 7.809007;
}

HTML

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

但是，如果你想使用，请使用下面的代码。使用坐标属性来设置纬度、经度(coords="marker.coords")

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        </ui-gmap-marker>
    </ui-gmap-google-map>

$scope.marker = {
      id: 0,
      coords: {
        latitude: 40.1451,
        longitude: -99.6680
      }