Google Maps API V3 未使用 Twitter 的 Bootstrap 在选项卡式页面上完美呈现答案

【问题标题】：Google Maps API V3 not rendering competely on tabbed page using Twitter's BootstrapGoogle Maps API V3 未使用 Twitter 的 Bootstrap 在选项卡式页面上完美呈现
【发布时间】：2012-04-29 03:22:41
【问题描述】：

我正在使用 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>

【问题讨论】：

可能重复：stackoverflow.com/questions/3777810/google-maps-dont-fully-load
您无法将谷歌地图加载到隐藏元素中。您需要在元素显示后加载地图。
您好 Mathletics，感谢您的帮助。我只是以以下方式更新了脚本，试图在显示元素后加载地图，但这仍然会导致错误。我已经在上面列出了更新的代码：
“错误”表示地图仍然无法正确显示？
在您的链接小提琴中，您仍然会在页面加载后立即初始化地图，而不是在显示选项卡时。您需要将var map = new google.Maps.map(...) 代码移动到您的选项卡控件中，以便在显示选项卡并且地图 div 可见后执行它。

标签： javascript jquery google-maps twitter-bootstrap

【解决方案1】：

这里有很多解决方案，坦率地说，它们都是错误的。如果您必须劫持 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 : weird UI display glitches (with screenshot)

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

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

【讨论】：

在地图可见时初始化地图是最干净、最可靠的解决方案，这应该是公认的答案。

【解决方案2】：

我也在与这个问题作斗争。我使用的是模态表单，它在隐藏时呈现了地图。当显示选项卡时，您需要触发此代码：

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

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

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

【讨论】：

使用引导程序，确保将其放入您显示的事件中，而不是显示事件中。
Bootstrap

【解决方案3】：

这对我来说很好，我使用 jquery 选项卡

            setTimeout(function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(default_lat, default_lng));
            map.setZoom(default_map_zoom);
        }, 2000);

从此链接https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

【讨论】：

【解决方案4】：

对我来说，它的工作原理是在模态显示之后调用渲染地图的函数。

我所要做的就是：

$(document).on("shown", "#eventModal", function(){
    bindMap(coordinates);
});

您可以对选项卡执行相同操作，因为它们也有一个“显示”事件。

【讨论】：

【解决方案5】：

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

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

});

希望对你有帮助。

【讨论】：

【解决方案6】：

我已经通过使用解决了这个问题

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

bootstrap-tab.js中的内部显示功能意味着在显示框时您应该触发resize事件并且将起作用..

编辑：我看到另一个链接相同的答案 Google Maps API v3, jQuery UI Tabs, map not resizing 我在解决问题后看到了这个链接，以找出为什么调整大小事件在标签的点击事件上不起作用但在标签js中起作用的原因仍然没有得到解答

【讨论】：

【解决方案7】：

要在隐藏的 div 中显示谷歌地图，div 必须在地图创建和加载之前显示。下面是一个例子：

<div  id="map_canvas" style="width:500px; height:500px"></div>

<script>
$(document).ready(function(){
  $('#button').click(function() {
    $('#map_canvas').delay('700').fadeIn();
    setTimeout(loadScript,1000);
  }); 
});

    function initialize() {
        var title= "Title";
        var lat = 50;
        var lng = 50;
        var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({
            position: myLatlng,
            title:artTitle
        });
        // To add the marker to the map, call setMap();
        marker.setMap(map);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }       
</script>

【讨论】：