11

我正在使用角度谷歌地图（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;
}

如果我将上面的代码放在引导模式中，谷歌自动完成功能不起作用

笔记：

上面的代码在没有引导模式的情况下工作（在正常视图中）

4

1 回答 1

10

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

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

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

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

我确定这是问题所在，因为如果您只是遵循ngx-bootstrap modal & AGM 的所有说明（您使用的是旧版本是 sebm-google-map ），您会注意到没有错误，但只有自动完成项没有显示。

看看我创建的这个 plunker（angular，ngx-bootstrap，angular-google-maps），一切都很好：

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

于 2017-07-25T15:13:23.250 回答