bootstrap模式框打开jquery位置选择器不显示

Question

我使用谷歌地图的jquery位置选择器插件。现在，我打开模态并且地图不显示：

这是我的代码：

＆＃13;

＆＃13;

$('#somecomponent1').locationpicker({
	location: {latitude: 46.15242437752303, longitude: 2.7470703125},
	radius: 300
	});

＆＃13;

<a class="form-control btn" style="background-color:#FA8F13;color:white" href="#" data-target="#pwdModal1" data-toggle="modal" class="forgot-pass"> Press </a><br>

<div id="pwdModal1" class="modal fade" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
              <div class="col-xs-12 col-md-6">
	              <div id="somecomponent1" style="height:400px;width:100%;">                                      
                  </div>
              </div>
         </div>
     </div>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢。 演示：http://logicify.github.io/jquery-locationpicker-plugin/

Answer 1

在bootstarp模式的显示事件中使用{tag}的'autosize'。

  $('#pwdModal1").on('shown.bs.modal', function () {
        $('#somecomponent1').locationpicker('autosize');

  });  

Answer 2

它在demo的链接文档中提供建议： -

  

在模态中使用小部件

     

放的时候很常见   小部件进入容器，在初始化期间不可见，   例如模态对话框。在这种情况下，您需要调用“自动调整大小”方法   每次调整容器大小。

$('#pwdModal1').on('shown.bs.modal', function() {
  $('#somecomponent1').locationpicker('autosize');
});