1

我正在使用引导模式内的jquery位置选择器。它会打开地图,但自动填充建议不可见。Jquery位置选择器自动完成不能在引导模式下工作

html和javascript代码如下。

$timeout(function() { 
 
    $('#onboardingModal').on('shown.bs.modal', function() { 
 
    $('#mappicker').locationpicker({ 
 
     location: { 
 
     latitude: 12.9715987, 
 
     longitude: 77.59456269999998 
 
     }, 
 
     radius: 200, 
 
     inputBinding: { 
 
     locationNameInput: $('#locationInput') 
 
     }, 
 
     enableAutocomplete: true, 
 
     autocompleteOptions: { 
 
      componentRestrictions: {country: 'in'} 
 
     }, 
 
     onchanged: function (currentLocation, radius, isMarkerDropped) { 
 
          var addressComponents = $(this).locationpicker('map').location.addressComponents; 
 
          $scope.lat = $(this).locationpicker('map').location.latitude 
 
          $scope.lng = $(this).locationpicker('map').location.longitude 
 
          // updateControls(addressComponents); 
 
     }, 
 
    }); 
 
    }); 
 
});
<div class="modal fade" id="onboardingModal" tabindex="-1" role="dialog" aria-labelledby="onboardingModalLabel" style="overflow:hidden" data-backdrop="static" data-keyboard="false"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="form-group"> 
 
      <label for="locationInput">LOCATION</label> 
 
      <input type="text" class="form-control" id="locationInput" placeholder="Search"/> 
 
      <div align="center" class="map" id="mappicker" style="width: 500px !important; height: 300px"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

试图改变的z-index也UI添加的前级的jQuery的,并没有在这两种情况下工作。 我在这做错了什么?

+0

能否请您提供证明您的问题小提琴? – Ionut

回答

2

我在github的其中一个问题中得到了答案。需要将z-index添加到pac-container。

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

参考:Github issue