Question

我需要在Bootstrap模式中创建一个Google Place选择器。它不在弹出窗口内工作，但如果我在弹出窗口中添加Place拾取器，则没有问题。

<a class="snd_profile_btn" data-toggle="modal" role="button" href="#myModal">SEND US YOUR PROFILE <img src="content/images/send_resume.png"></a>

<!--model--->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal career_popup" style="display: none;">
    <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h3 id="myModalLabel">Career Form</h3>
    </div>

    <div class="modal-footer text-left">
      <!--career form-->
        <div class="career_forms">
            <form method="post" action="<?php echo $this->baseUrl();?>/index/send-career" enctype="multipart/form-data">
                <label>Name</label>
                <input type="text" class="career-input">
                <label>Location</label>
                <input class="placepicker"  placeholder="Enter a location" 
           </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"> </script>
<script type="text/javascript" src="js/jquery.placepicker.js"></script>
<script>
  $(document).ready(function() {

    // Basic usage
    $(".placepicker").placepicker();

    // Advanced usage
    $("#advanced-placepicker").each(function() {
      var target = this;
      var $collapse = $(this).parents('.form-group').next('.collapse');
      var $map = $collapse.find('.another-map-class');

      var placepicker = $(this).placepicker({
        map: $map.get(0),
        placeChanged: function(place) {
          console.log("place changed: ", place.formatted_address, this.getLocation());
        }
      }).data('placepicker');
    });

  }); // END document.ready
 </script>

Answer 1

我建议在第一次显示模态时触发placepicker设置代码。特别是如果你使用它与地图。使用显示的（vs show）事件确保模式已完全呈现。该活动为$('myModal').on('shown.bs.modal', ...)

Google Place Picker未显示在引导程序模型弹出窗口内

1 个答案: