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