jquery - 谷歌地图在 Bootstrap 3.0 模式中未完成加载

Question

我将 jquery 位置选择器添加到 bootstrap modal 3 的内容框中。如下所示:

HTML:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title">Modal title</h4>

                </div>
                <div class="modal-body">Location:
                    <input type="text" id="us2-address" style="width: 200px" />Radius:
                    <input type="text" id="us2-radius" />
                    <div id="us2" style="height: 400px;"></div>Lat.:
                    <input type="text" id="us2-lat" />Long.:
                    <input type="text" id="us2-lon" />
                </div>
                <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
     <a href="#" class="btn btn-primary" id="save-changes">Save changes</a>

                </div>
            </div>
        </div>
    </div>

现在，当加载谷歌地图(在启动模式中单击)时，加载未完成，我看到了其中的一部分。

注意:如果调整加载的浏览器 map 窗口的大小。

看图片:

演示:http://jsfiddle.net/Lzv7w/3/

如何解决这个问题？!

Answer 1

这里有一个方法:

第一次显示模式时，您会初始化 map ...

fiddle :http://jsfiddle.net/Lzv7w/8/

JS:

var stillPresent = false;
$('#myModal').on('shown.bs.modal', function (e) {
        if(stillPresent == false){
               $('#us2').locationpicker({
            location: {
                latitude: 46.15242437752303,
                longitude: 2.7470703125
            },
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });
         stillPresent = true;
        }
    })