在 jQuery 中调整 google 地图大小切换 div - 显示问题

Question

我有一个小 div 显示 google 地图。单击按钮后，我将地图 div 面板扩展得更大 - 简单的 jQuery 切换。

这工作正常，但一旦切换到更大尺寸，地图就无法正确显示。我正在使用

google.maps.event.addDomListener(window, 'resize', function()

和

var currCenter = map.getCenter();

允许调整容器大小和 re-centering 地图，但由于某些原因它不起作用。

它造成了灰色块和不居中的问题。

这是我正在使用的 google 地图代码：

    function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        });

        //Get current center
        var currCenter = map.getCenter();

        //Use event listener for resize on window
        google.maps.event.addDomListener(window, 'resize', function() {
        //Set Center
        map.setCenter(getCen);
    });

这里是 JSFiddle link 看看我到目前为止得到了什么：https://jsfiddle.net/9ejvmn4q/

Answer 1

如果我在 .toggleClass 函数具有运行时触发调整大小事件，它对我有用（要求是一旦 div 调整大小就触发它，所以如果有任何动画或异步延迟，您可能需要考虑到这一点）。

另请注意，要使 map resize 和 setCenter 起作用，map 和 currCenter 变量需要在正确的范围内.

$(document).ready(function() {
    $('.map-toggle').click(function(){
    $('.map').toggleClass('fullsize');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
    });
});

updated fiddle

代码片段：

$(document).ready(function() {
  $('.map-toggle').click(function() {
    $('.map').toggleClass('fullsize');
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
  });
});

.clear {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 100%;
}
#content {
  width: 560px;
}
.map-section {} .map {
  width: 140px;
  height: 200px;
  float: right;
}
.map.fullsize {
  width: 100%;
}
.map-toggle {} .student-results-main {
  float: left;
  width: 390px;
  background: #ddd;
  min-height: 300px;
}
.student-results-sidebar {
  float: right;
  width: 140px;
  background: #eee;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
  var currCenter;
  var map;

  function initMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    });

    //Get current center
    currCenter = map.getCenter();

    //Use event listener for resize on window
    google.maps.event.addDomListener(window, 'resize', function() {
      //Set Center
      map.setCenter(currCenter);
    });
  }
</script>

<div id="content">
  <div class="map-section">
    <div id="map" class="map"></div>
  </div>


  <div class="student-results-main"></div>

  <div class="student-results-sidebar">
    <button class="map-toggle">toggle</button>
  </div>
  <div class="clear"></div>
</div>

在 jQuery 中调整 google 地图大小切换 div - 显示问题

Resize google map in jQuery toggle div - display issue

jquery

google-maps

toggle

google-maps-api-3