谷歌地图自动完成在模态弹出窗口中不起作用

Question

我正在使用谷歌地图 api。我正在尝试为输入框实现自动完成地址功能。但问题出在页面上似乎一切正常，但在模态弹出窗口中却无法正常工作。

这是html

    <div class="col-xs-5 col-sm-2 col-md-2">
    <a href="javascript:void(0)" data-ng-click="addlocationpopup()">+New 
    Location</a>
    </div> <!--button which calls popup -->

这是模态弹出窗口

    <div class="modal right fade addlocation" id="myModal_5" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel2" data-keyboard="false">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel1">ENTER LOCATION 
            DETAILS</h4>
        </div>
        <form name="locationForm" novalidate="novalidate" method="post">
            <div class="modal-body">
                <div class="row"> 
                  <div>
                  <input id="autocomplete" placeholder="Enter your address"
                  onFocus="geolocate()" type="text"></input>
                  </div>
                </div>
             </div>
         </form>
        </div>
       </div>
      </div>
    <script 
    src="https://maps.googleapis.com/maps/api/js?
    key=mykey&libraries=places&callback=initAutocomplete" async defer>
    </script>
    <script>
    var placeSearch, autocomplete;
    var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
   autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});
   autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

控制器。 js ：

    $scope.addlocationpopup = function(){
    $(".addlocation").modal("show");
    }

如果在页面中我放了一个输入框并输入它工作正常。页面加载时已经加载。谁能告诉如何让它在模态弹出窗口中工作？

Answer 1

自动完成建议的结果在那里，但隐藏在具有更高z-index值的弹出/模式窗口下方。 要解决此问题，请将以下 CSS 添加到您的样式表中：

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

Answer 2

对于Angular 4+

::ng-deep .modal { z-index: 1001 !important;} 

::ng-deep .modal-backdrop {z-index: 1000 !important;}

::ng-deep .pac-container {z-index: 1055 !important;}

Answer 3

最后我解决了这个问题。我使用 z-index css 功能来显示自动完成地址，因为我在输入框中输入这样的内容

    <div class="modal right fade addlocation" id="myModal_5" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel2" data-keyboard="false" style="z-index:2;">

现在我可以看到地址建议了。

Answer 4

我能够通过放置这些行来修复它：

<style>
.modal { z-index: 1001 !important;} 
.modal-backdrop {z-index: 1000 !important;}
.pac-container {z-index: 1055 !important;}
</style>

Answer 5

尝试对组件 scss 文件执行以下操作：

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