Google地图无法正常显示 [英] Google map does not display properly

问题描述

我在 Twitter Bootstrap的 Modal窗口上有一个Google Map小部件。

当我打开模式窗口时，此地图仅显示在小部件的一部分上（示例）。

我重新调整浏览器窗口的大小后，此地图显示正常。

我试图将用户（在div上使用map），但它不起作用。



任何对我的问题的建议表示感谢。

解决方案

之前我已经解决了这个问题。将地图加载到display：none画布时，Google Map将无法正确显示。 Bootstrap模态胜利将在开始时隐藏。因此，您必须确保在Google地图完成加载之前无法隐藏地图画布。

我的解决方法是将画布移动到用户不能放置的位置看到它并将地图加载到它中。几秒钟后（也许是500毫秒），将地图移动到正确的位置（在你的情况下是模态体）。

我写了一个简单的例子。您可以尝试一下：

HTML：

 < div id =mapstyle =height：300px; margin-top：-1000px>< / div> 
 
< div class =modal-header> 
 < h3 id =myModalLabel>模态标头< / h3> 
< / div> 
< div class =modal-body> 
 
< / div> 
< div class =modal-footer> 
< button class =btndata-dismiss =modalaria-hidden =true>关闭< / button> 
< button class =btn btn-primary>保存更改< /按钮> 
< / div> 
< / div> 
  

JavaScript：

  $（function（）{
 var mapOptions = {
 zoom：8，
 center：new google.maps.LatLng（-34.397,150.644），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 
 var map = new google.maps.Map（document.getElementById（map），mapOptions）; 
 setTimeout（function（）{ 
 $（'。modal-body'）。append（$（＃map）。css（margin-top，0px）。get（0））; 
}，500 ）; 
}）; 
  

演示截图：

I have a Google Map widget on Twitter Bootstrap's Modal window.

When I open modal window, this map is displayed only on a part of a widget (example).

After I re-size browser window this map is displayed properly.

I tried to user $('#map').resize() (on div with map) but it doesn't work.

Any suggestion on my issue are appreciated.

解决方案

I had solved this problem before. Google Map will not display properly when you load the map into a "display:none" canvas. Bootstrap modal win will be hidden in the beginning. So you have to make sure that map canvas can't be hidden before Google Map finished loading.

My work around is move the canvas to a positon which user can't see it and load map into it. After a few second (maybe 500ms), move map to the right position (in your case is modal body).

I write a simple example. You could try it:

HTML:

<div id="map" style="height:300px;margin-top:-1000px"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

JavaScript:

$(function(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        setTimeout(function(){
            $('.modal-body').append($("#map").css("margin-top","0px").get(0));
        },500);
    });

Demo screen shot:

这篇关于Google地图无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！