javascript - Google Maps API V3 无法使用 Twitter 的 Bootstrap 在标签页上完全呈现

Question

我使用 Twitter 的 Bootstrap 来定义我的 CSS。我制作了一个包含三个选项卡的页面。第二个选项卡包含使用 Google map 构建的 map 。但是，当打开页面并切换到带有 map 的第二页时， map 并未完全呈现。一旦我将 google map 选项卡作为所选选项卡重新加载页面， map 就会完全加载。

我读了一些帖子，建议有同样问题的人将以下代码添加到 javascript 中:

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(homeLatlng);
});

但这似乎不是解决方案。请在下面找到完整的代码:

Javascript:

<script type="text/javascript">
function initialize() {
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(homeLatlng);
    });

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
                                parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
        }
    });
}
</script>

HTML:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
      <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>

我该如何解决这个问题？也许我可以添加一些 javascript，在选择选项卡后重新加载谷歌地图部分，但我不知道该怎么做....

更新后的代码仍然显示错误:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
    <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
      function initialize() {
        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(homeLatlng);
        });

        var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        downloadUrl("data.xml", function(data) {
          var markers = data.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
           }
        });
        map.checkResize();
    }
    </script>
</div>

Answer 1

我也在为这个问题而苦恼。我使用的是模态形式，它在隐藏时呈现 map 。显示标签时，您需要触发此代码:

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

希望它对你有用。如果这不起作用，这是我找到解决方案的链接。也许会有另一个有用的评论。

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448