使用Twitter的Bootstrap,Google Maps API V3无法在标签页上进行竞争

Question

我正在使用Twitter的Bootstrap来定义我的CSS.我创建了一个包含三个选项卡的页面.第二个标签包含使用Google地图构建的地图.但是,当打开页面并使用地图切换到第二页时,地图不会完全呈现.一旦我使用谷歌地图选项卡重新加载页面作为选定的选项卡,地图就会完全加载.

我读了一些帖子,建议有相同问题的人将以下代码添加到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

我也在和这个问题作斗争.我使用的是模态形式,它在隐藏时会渲染地图.显示选项卡时,您需要触发此代码:

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

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

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

Answer 2

这里有很多解决方案,坦率地说他们都错了.如果您必须使用Bootstrap选项卡的默认功能,请不要使用Bootstrap选项卡.如果您仅在显示选项卡后调用resize,则可能仍然存在GMaps界面问题(缩放级别等).您只需在选项卡可见后初始化地图.

var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

你可以在这个bootply中看到一个工作示例:http://www.bootply.com/102241

注意:如果您的界面仍然存在问题,可能就是这个问题: Google Maps API V3:奇怪的UI显示故障(带截图)

使用最新的gmaps api,您只需将其添加到您的样式中:

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

Answer 3

在测试不同的延迟后为我工作:

    $(window).resize(function() {
        setTimeout(function() {
              google.maps.event.trigger(map, 'resize');
           }, 300)            

});

希望能帮助到你.