如何在角度2+的引导程序模式中创建Google自动完成功能? [英] how to create google autocomplete in bootstrap modal in angular 2+?
问题描述
我正在使用通过以下方式创建的Google自动完成功能的角度Google Maps(agm).
I am using angular google maps (agm) i created google autocomplete by below way.
以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;
}
如果我将上述代码置于引导程序模式下,则谷歌自动填充功能不起作用
if I put the above code in bootstrap modal, google autocomplete is not working
注意:
以上代码在没有引导模式的情况下正常工作(在正常情况下)
above code is working without bootstrap modal(in normal view)
推荐答案
它在普通视图下有效,并且在模式上无效,所以我想您的问题与 z-index 有关css属性.
It works in normal view, and it doesn't work in a modal, so I guess your issue is about z-index css property.
解决方案是将Google自动填充项的z-index设置为模式引导z-index的更多值:
The solution is to set the google autocomplete item's z-index more than the modal bootstrap z-index:
.pac-container {
z-index: 1054 !important;
}
来源: https://github.com/twbs/bootstrap/issues/4160
我确定这是问题所在,因为如果您按照 ngx-bootstrap的所有说明进行操作情态& AGM(您使用的旧版本是sebm-google-map),您会注意到没有错误但仅不显示自动完成项.
I'm sure this is the problem because if you just followed all instruction for ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map ) you will notice that there are no error but only the autocomplete item are not showing.
看一下我创建的这个插件(角度,ngx-bootstrap,angular-google-maps),一切都很好:
Look in this plunker I created (angular, ngx-bootstrap, angular-google-maps) and all is fine:
https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/
这篇关于如何在角度2+的引导程序模式中创建Google自动完成功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!