Question

我想使用angular-google-maps动态添加语言。语言是动态的，可以从screen.locale检索。我的应用程序是基于语言环境的，当用户选择其他语言时，一切都会改变。问题是Google地图城市也没有根据语言而变化，我在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

该项目不再得到积极维护

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

使用AGM与Google Map一起使用。它非常易于使用。

[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属性以设置纬度，经度（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
      }

Answer 2

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

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;

为我工作，希望对您有所帮助：）

使用angular-google-maps动态添加语言/语言环境？

2 个答案: