Динамически добавлять язык / локаль, используя angular-google-maps?

Question

Я хочу динамически добавлять язык, используя angular-google-maps.Язык является динамическим и может быть получен из screen.locale.Мое приложение основано на локали, и все меняется, когда пользователь выбирает другой язык.Проблема в том, что Google Maps города не меняются в зависимости от языка, я не нашел ни одного тега локали в 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

чтобы заменить язык, вы должны сначала удалить скрипт и карты 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;

работает для меня, надеюсь, это поможет:)

Answer 2

Этот проект больше не поддерживается активно

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

Используйте AGM для работы с Google Map.Он очень прост в использовании.

[https://angular -maps.com / guides / Getting-Start] [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>

Но все же, если вы хотите использовать, пожалуйста, используйте следующий код.Используйте inorder атрибута ords для задания широты и долготы (ordins = "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
      }