Question

我从这里尝试了几个不同的回答，都没有成功。

从标题中你可以猜到，当Bootstrap选项卡打开时，地图需要调整大小，因为地图加载时为0x0，我无法弄清楚如何使其工作。

我目前的尝试包含在下方，但没有结果。

<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#detail" data-toggle="tab">Hotspot Data</a></li>
    <li><a href="#table" data-toggle="tab">Recent Sightings Table</a></li>
     <li><a href="#nearby" data-toggle="tab">Nearby Hotspots</a></li>
     <li><a href="#plan" data-toggle="tab">Weather Forecast</a></li>
    <li style='padding-top:10px; padding-left:10px;'><div id='loadgif'><img src='/images/36.gif'/> Loading Hotspot Data</div></li>

</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="detail">
//some info is displayed here
 </div>

// this starts the second tab
<div class="tab-pane" id="nearby">
<script src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r287/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  var script = '<script type="text/javascript" src="../src/markerclusterer';
  if (document.location.search.indexOf('compiled') !== -1) {
    script += '_compiled';
  }
  script += '.js"><' + '/script>';
  document.write(script);
</script>
<script type="text/javascript">

  function initialize() {
      var center = new google.maps.LatLng(lat, lng); //these come from some php variables
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var tab = jQuery('.tabs')[1]
            jQuery(tab).one('click', function(){
              google.maps.event.trigger(map, 'resize');
              map.setCenter(center)
            });


var hotspots = [
['ASU Research Park', 33.3428, -111.8975, '2', '204', '28', 'Maricopa', 'Arizona', 'L283889'], 
['Chaparral Park', 33.5110032, -111.906631, '7', '1', '1', 'Maricopa', 'Arizona', 'L357429']]
// more results are here
    var markers = [];
        for (var i = 0; i < hotspots.length; i++) {
            var imageUrl = '/images/green.png';
            var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(32, 32));
            var latLng = new google.maps.LatLng(hotspots[i][1],hotspots[i][2]);
            var marker = new google.maps.Marker({
                position: latLng,
                icon: markerImage,
                title: hotspots[i][0],
                  map: map
            });
            var infowindow = new google.maps.InfoWindow({ });
            markers.push(marker);
            google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                return function() {
                    infowindow.setContent('some html here');
                    infowindow.open(map, marker);
                }

            })(marker, i));  
        }
        var markerCluster = new MarkerClusterer(map, markers);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id='map-container'><div id='map'></div></div>
</div>

Answer 1

我用过这个

 <div id="map-canvas" style="width:100%;height:677px;" />

Answer 2

我想我想出了这个。

显示标签后，您必须初始化地图。

对我来说，这很有效：

var map;
$('a[data-toggle="tab"][href="#maptab"]').on('shown.bs.tab', function(e) {
    if (map == undefined) {
        // initialize map code here
        map = new google.maps.Map(...);
    }
});

当然可以正确设置标签ID。

在Bootstrap选项卡上单击调整Google标记群集映射的大小

2 个答案: