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

Question

我使用 google map 的 jquery 位置选择器插件。现在，我打开模态，但 map 不显示:

这是我的代码:

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

<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>

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

Answer 1

它在 demo 链接的文档中建议:-

Using widget in modal

It is pretty common situation when you putwidget into the container which is not visible during initialization,e.g. modal dialog. In thins case you need to call "autosize" methodeach time you resize container.

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