как создать автозаполнение Google в модальном бутстрапе в angular 2+?

Я использую угловые карты Google (agm), я создал автозаполнение Google следующим образом.

в HTML

  <input type="text" #pick id="address" class="form-control" [(ngModel)]="pickAddress" name="pickAddress" (ngModelChange)="pickAdd()" placeholder="Pick Up Address" onclick="return false" style="padding-left: 30px;border-radius: 25px;border: 1px solid #31708f;"

в файле Ts:

pickAdd() {
  var autocomplete:any;
  var options = { componentRestrictions: {country: "IN"} };
  this. inputAddress = document.getElementById('address');
  autocomplete = new 
  google.maps.places.Autocomplete(this.inputAddress,options)
  google.maps.event.addListener(autocomplete, 'place_changed', ()=> {
    this.ngZone.run(() => {
      this.zoom=8;
      var place = autocomplete.getPlace();
      this.lat = place.geometry.location.lat();
      this.lng = place.geometry.location.lng();
      this.getGeoLocation(this.lat,this.lng);
    });
  });
}

CSS:

sebm-google-map {
    height: 300px;
}

если я помещу приведенный выше код в модальный режим начальной загрузки, автозаполнение Google не работает

Примечание:

приведенный выше код работает без модального бутстрапа (в обычном режиме)


google-places-api angular twitter-bootstrap ngx-bootstrap
person paruvelly Vishwanath    schedule 13.07.2017    source источник
comment
На ваш вопрос будет легче ответить, если вы можете предоставить плункер   -  person K Scandrett    schedule 23.07.2017
comment
это полезно? plnkr.co/edit/5rvz2LbIYKAFmJmzNIqs?p=preview   -  person Ismail Farooq    schedule 25.07.2017
comment
на самом деле я использую angular 2 bro.   -  person paruvelly Vishwanath    schedule 25.07.2017

Ответы (1)


arrow_upward
10
arrow_downward

Он работает в обычном режиме и не работает в модальном, поэтому я предполагаю, что ваша проблема связана со свойством z-index css.

Решение состоит в том, чтобы установить z-индекс элемента автозаполнения Google больше, чем z-индекс модальной начальной загрузки:

 .pac-container {
    z-index: 1054 !important;
 }

Источник: https://github.com/twbs/bootstrap/issues/4160

Я уверен, что это проблема, потому что если вы просто следовали всем инструкциям для модального окна ngx-bootstrap & AGM (вы используете старую версию sebm-google-map ) вы заметите, что ошибки нет, но не отображается только элемент автозаполнения.

Посмотрите в этот плункер, который я создал (angular, ngx-bootstrap, angular-google-maps), и все в порядке:

https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/

person Fetrarij    schedule 25.07.2017