地图自动完成未以模态角度显示。 z-index 不工作

Question

我正面临一个让我发疯的问题。 我正在做一个有角度的项目，我需要将地图搜索放在一个模式窗口中。我使用了 ng bootstrap modals 和 google maps。

这是我的 .ts：

    @Component({
  selector: 'app-classroom-detail-dialog',
  templateUrl: './classroom-detail-dialog.component.html',
  styleUrls: ['./classroom-detail-dialog.component.css']
})
export class ClassroomDetailDialogComponent implements OnInit {
  @Input() idClassroom: number;
  classroom: Class;
  edit: boolean = true;

  public latitude: number;
  public longitude: number;

  public searchControl: FormControl;
  @ViewChild("search") public searchElementRef: ElementRef;

  constructor(public activeModal: NgbActiveModal, public classroomService: ClassroomService,
    public mapsAPILoader: MapsAPILoader, public ngZone: NgZone) { }

  ngOnInit() {
    this.classroomService.getClassroomDetail(this.idClassroom).subscribe(classroom=>{
      this.classroom = classroom;
      this.latitude = this.classroom.latitude;
      this.longitude = this.classroom.longitude;
    });
    //create search FormControl
    this.searchControl = new FormControl();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {      
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoom
          this.classroom.latitude = place.geometry.location.lat();
          this.classroom.longitude = place.geometry.location.lng();
        });
      });
      autocomplete.setComponentRestrictions
    });
  }

  closeModal() {
    this.activeModal.close('Modal Closed');
  }

  markerDragEnd($event) {
    console.log($event.coords.lat);
    console.log($event.coords.lng);
    this.classroom.latitude = $event.coords.lat;
    this.classroom.longitude = $event.coords.lng;
  }

  reset() {
    this.classroom.latitude = this.latitude;
    this.classroom.longitude = this.longitude;
  }
}

这是我的 .html：

<div id="myModal_def" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header" style="padding:0">                                                        
                <h3 id="titolo_modal" style="text-align: center;">Classroom {{classroom?.name}}</h3>                                                              
                </div>
            <div class="modal-body" style="padding:0">                                    
                <div class="col-lg-12">
                        <div class="form-group">
                                <input placeholder="Search" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="pac-container" #search [formControl]="searchControl">
                            </div>
                                    <agm-map [latitude]="classroom?.latitude" [longitude]="classroom?.longitude" [zoom]="18" [mapTypeId]="'hybrid'">

                                <agm-marker [markerDraggable]="true" [latitude]="classroom?.latitude" [longitude]="classroom?.longitude" (dragEnd)="markerDragEnd($event)"></agm-marker>
                                    </agm-map>
                                    <button (click)="reset()">Reset position</button>
                </div>                                                                                                          
            </div>
            <div class="modal-footer" style="margin-right:20%">
                <div id="div_footer" class="col-md-12">                            
                    <button (click)="closeModal()" id="close_modal" class="btn btn-info">Close</button>
                    <button *ngIf="!edit" id="save_modal"  class="btn btn-info">Save</button>                            
                </div>
            </div>
        </div>
    </div>

</div>

这是我的 .css：

agm-map {
  height: 300px;
}

  /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
       #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-container {
        background-color: #fff;
        position: absolute!important;
        z-index: 1100;
        border-radius: 2px;
        border-top: 1px solid #d9d9d9;
        font-family: Arial,sans-serif;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }
      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }


      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }

所以，这是我的问题：

Screenshot

自动完成没有显示，它在模态后面！ 我知道它在模态框后面，因为如果我移动搜索框，我可以看到它！

Screenshot 2

我已经尝试过使用 z-index：即使我使用 !important，每个值都是无用的。

此外，我注意到，如果我在 Chrome 的开发人员选项中编辑元素选项卡中的 z-index 值，我可以看到 pac-container。所以我认为这是与 css 相关的东西不起作用。

Screenshot 3

请帮忙！

Answer 1

我昨天遇到了这个问题（关于这个问题）。我通过将 NgbTypeaheadConfig 注入我的类并将 config.container 设置为“body”来修复它。

This Github 问题为我指明了正确的方向。 （以及随后的pull request）

你的构造函数会变成：

constructor(public activeModal: NgbActiveModal, public classroomService: 
    ClassroomService, public mapsAPILoader: MapsAPILoader, public ngZone: NgZone,
    private typeaheadConfig: NgbTypeaheadConfig)  
{
    this.typeaheadConfig.container = 'body';
}

Answer 2

我用这个让它工作了：

.pac-container {
  background-color: #FFF;
  z-index: 1050;
  position: fixed;
  display: inline-block;
  float: left;
}

来源： Google Maps Autocomplete Result in Bootstrap Modal Dialog

Answer 3

请在您的 scss 文件中添加以下样式，::ng-deep 它对我有用。

::ng-deep .pac-container {   
    z-index: 9999;
}