Google地图无法正常显示
我在Twitter Bootstrap's
Modal窗口上有一个Google Map小部件。
当我打开模态窗口时,此地图仅显示在窗口小部件的一部分上( 示例 )。
在重新调整浏览器窗口大小后,此地图将正确显示。
我尝试使用$('#map').resize()
(在带地图的div上),但它不起作用。
对我的问题的任何建议表示赞赏。
我以前解决了这个问题。 将地图加载到“display:none”canvas时,Google Map将无法正常显示。 Bootstrap模态获胜将在开始时隐藏。 因此,您必须确保在Google Map完成加载之前无法隐藏地图canvas。
我的工作是将canvas移动到一个位置,用户无法看到它并将地图加载到其中。 几秒钟后(可能是500毫秒),将地图移动到正确的位置(在您的情况下是模态体)。
我写了一个简单的例子。 你可以尝试一下:
HTML:
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); });
演示屏幕截图: