31

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

7 回答 7

47

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

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

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

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

于 2012-07-12T05:42:26.167 回答
8

这里有很多解决方案，坦率地说，它们都是错误的。如果您必须劫持 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; }
于 2015-05-09T04:24:13.503 回答
6

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

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

});

希望能帮助到你。

于 2013-06-06T10:50:57.340 回答
4

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

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

bootstrap-tab.js中的内部显示功能意味着在显示框时您应该触发调整大小事件并且可以工作..

编辑：我已经看到另一个具有相同答案的链接 Google Maps API v3, jQuery UI Tabs, map not resizing 我在解决问题后看到了这个链接，以找出仍然没有答案的原因，即为什么 resize 事件不起作用选项卡的单击事件，但在选项卡 js 中有效

于 2013-05-21T11:05:03.617 回答
2

这对我来说很好，我使用 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

于 2014-03-09T17:09:12.837 回答
1

要在隐藏的 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>
于 2012-10-28T15:15:30.110 回答
-1

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

我所要做的就是：

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

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

于 2013-07-29T02:55:41.793 回答