Google地图未完成加载在bootstrap 3.0 modal [英] Google map not complete load in bootstrap 3.0 modal

问题描述

我在引导模式3的内容框中添加jquery位置选择器。像这样：

HTML：

 < a data-toggle =modalhref =＃myModalclass =btn btn-primary>启动模式< / a& 
 
< div class =modalid =myModal> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>×< / button> 
< h4 class =modal-title>模态标题< / h4> 
 
< / div> 
< div class =modal-body>位置：
< input type =textid =us2-addressstyle =width：200px/& b $ b< input type =textid =us2-radius/> 
< div id =us2style =height：400px;>< / div> Lat .: 
< input type =textid =us2-lat/ > Long：
< input type =textid =us2-lon/> 
< / div> 
< div class =modal-footer> < a href =＃data-dismiss =modalclass =btn>关闭< / a> 
< a href =＃class =btn btn-primaryid =save-changes>保存更改< / a> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

现在，当加载google地图（点击启动模式） 注意：如果调整浏览器地图的大小窗口加载。

查看图片：

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

如何解决这个问题？

解决方案

这是一种方式：

你初始化地图，第一次显示模态...

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

I add jquery location picker into content box of bootstrap modal 3. Like This :

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>

Now, when load google map(click in launch modal) not load completed and I see Part of it.

NOTE : if resize window of browser map loaded.

See Pic :

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

How to fix this ?!

解决方案

Here is a way :

You init the map, the first time you show the modal...

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;
        }
    })

这篇关于Google地图未完成加载在bootstrap 3.0 modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！