Question

我将jquery位置选择器添加到bootstrap模态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>

现在，当加载谷歌地图(click in launch modal)未加载完成时，我会看到其中的一部分。

注意：如果加载浏览器地图的大小调整窗口。

见图：

enter image description here

DEMO：http://jsfiddle.net/Lzv7w/3/

如何解决这个问题？！

Answer 1

这是一种方式：

首次显示模态时，您可以初始化地图...

小提琴：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;
        }
    })

Answer 2

我遇到了同样的问题，但是在一个标签页面中加载地图，以修复当您点击标签时必须调用07-13 15:15:25.961 28110-28110/com.marshall.gruppo E/﹕ Device driver API match Device driver API version: 29 User space API version: 29 07-13 15:15:25.961 28110-28110/com.marshall.gruppo E/﹕ mali: REVISION=Linux-r3p2-01rel3 BUILD_DATE=Tue Jul 22 19:59:34 KST 2014 07-13 15:15:26.051 28110-28110/com.marshall.gruppo D/OpenGLRenderer﹕ Enabling debug mode 0 07-13 15:15:28.726 28110-28110/com.marshall.gruppo D/dalvikvm﹕ GC_FOR_ALLOC freed 153K, 6% free 14269K/15064K, paused 9ms, total 9ms 07-13 15:15:28.751 28110-28110/com.marshall.gruppo D/AbsListView﹕ Get MotionRecognitionManager 07-13 15:15:28.831 28110-28110/com.marshall.gruppo D/dalvikvm﹕ GC_FOR_ALLOC freed 115K, 6% free 14329K/15088K, paused 12ms, total 12ms 07-13 15:15:28.861 28110-28110/com.marshall.gruppo I/dalvikvm-heap﹕ Grow heap (frag case) to 33.649MB for 19955728-byte allocation 07-13 15:15:28.876 28110-28119/com.marshall.gruppo D/dalvikvm﹕ GC_FOR_ALLOC freed 1K, 3% free 33816K/34580K, paused 13ms, total 13ms 07-13 15:15:33.401 28110-28110/com.marshall.gruppo W/IInputConnectionWrapper﹕ showStatusIcon on inactive InputConnection 07-13 15:15:37.681 28110-28110/com.marshall.gruppo D/AbsListView﹕ onDetachedFromWindow的问题，在我的情况下，这里是解决方案：

.locationpicker

Google地图在bootstrap 3.0模式中未完全加载

2 个答案: