làm thế nào để tạo google autocomplete trong bootstrap phương thức trong góc 2+?

Question

Tôi đang sử dụng bản đồ google góc (agm) tôi đã tạo google autocomplete theo cách dưới đây.

trong 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;" 

trong Ts File:

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

nếu tôi đặt mã trên trong phương thức bootstrap, google autocomplete không hoạt động

Lưu ý:

trên đang làm việc mà không modal bootstrap (theo quan điểm bình thường)

Answer 1

Nó hoạt động theo quan điểm bình thường, và nó không hoạt động trong một phương thức, vì vậy tôi đoán vấn đề của bạn là về z-index thuộc tính css.

Giải pháp là để thiết lập z-index autocomplete mục của google hơn các phương thức bootstrap z-index:

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

Nguồn: https://github.com/twbs/bootstrap/issues/4160

tôi chắc chắn rằng đây là vấn đề bởi vì nếu bạn chỉ cần làm theo tất cả hướng dẫn cho ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map) bạn sẽ nhận thấy rằng không có lỗi nhưng chỉ mục tự động hoàn tất không hiển thị.

Look in plunker này tôi tạo ra (góc, NGX-bootstrap, góc-google-map) và tất cả là tốt:

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