JS - Google地图在窗口加载时显示为灰色，在调整大小时正确显示，为什么？

Question

我有一张位于引导标签面板内的地图，它显示灰色，这显然是不可取的。然而，第二个我调整窗口大小，它立即准确加载。我在同一网站上的另一个页面中使用相同的脚本，但是在该页面上它不在选项卡窗格中 - 并且它加载正常。我尝试重新排序页面上的脚本，因为我认为有些东西可能会干扰，但它没有帮助。注意我也尝试添加行google.maps.event.trigger(map, 'resize');，因为我在这里阅读了另一篇类似问题的帖子，但它也没有帮助。

如果我最初点击标签，我会看到：

如果我调整窗口大小，我会得到这个：

地图的JS：

function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(49.246292,-123.116226),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: [...]
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        google.maps.event.trigger(map, 'resize');
}
google.maps.event.addDomListener(window, 'load', initialize);

脚本被加载到html的头部，如下所示：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/glyphcon.png" sizes="96x96"/>
<title><?php echo "" . $name . "" ?></title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/general.css" rel="stylesheet"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/map.js"></script>

带有地图div的标签面板如下：

<div role="tabpanel" class="tab-pane fade" id="address">
    <div id="map"></div>
</div>

谁能告诉我为什么会这样？

Answer 1

如果在地图初始化/加载期间看不到选项卡这是正常行为，则应在选项卡单击操作期间调用resize，或者在单击选项卡时更好地调用（重新）初始化函数。