如何在角度2+的bootstrap模式中创建谷歌自动完成？

Question

我正在使用角谷歌地图(agm)我通过以下方式创建谷歌自动完成.

在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;
}

如果我将上述代码放在bootstrap模式中,则谷歌自动完成功能无效

注意:

上面的代码工作没有bootstrap模式(在普通视图中)

Answer 1

它在普通视图中工作,并且它在模态中不起作用,所以我猜你的问题是关于z-index css属性.

解决方案是将google自动完成项的z-index设置为比模态引导z-index更多:

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

资料来源:https://github.com/twbs/bootstrap/issues/4160

我确定这是问题所在,因为如果您只是遵循ngx-bootstrap模式和AGM的所有指令(您使用旧版本是sebm-google-map),您会注意到没有错误但只有自动完成项目没有显示.

看看我创建的这个plunker(angular,ngx-bootstrap,angular-google-maps),一切都很好:

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