Question

Fiddle，代码将说明一切。我只想在左侧看一个可以切换的面板。因此，如果我点击它将滑出，如果我再次点击它将重新滑入。我能够很容易地调整其右侧显示的谷歌地图的大小，但是，每当面板滑出时，地图的“新部分”仍然存在卸载。我尝试使用文档中的建议：

var toggle = true;

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  $('#infoWindow').click(function() {
    if (toggle) {
      $('#infoWindow').animate({
        left: -160
      });
      $('#map_div').animate({
        width: $('#map_div').width() + 160,
        left: 40
      });
      google.maps.event.trigger(map, 'resize');
    } else {
      $('#infoWindow').animate({
        left: 0
      })
      $('#map_div').animate({
        width: $('#map_div').width() - 160,
        left: 200
      });
    }
    toggle = !toggle;
  });
});

但我觉得我错过了什么。

为了更好地理解，无论何时单击面板以减少它，您都会注意到地图的最右侧未加载。我怎样才能解决这个问题？我做错了什么？

代码段（来自链接小提琴）：

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}
#map_div {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  width: calc(100% - 200px);
}
#infoWindow {
  z-index: 10;
  top: 0px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>

.vertical

Answer 1

你需要在完成动画后触发'resize'。您可以使用.animate .complete函数（documentation）：

.animate（properties [，duration] [，easing] [，complete]）

<强>定义：


完成|输入：Function（）

动画完成后调用的函数，每个匹配元素调用一次。

$('#map_div').animate({ width: $('#map_div').width() + 160, left: 40 }, function() { google.maps.event.trigger(map, 'resize'); });

和

$('#map_div').animate({ width: $('#map_div').width() - 160, left: 200 }, function() { google.maps.event.trigger(map, 'resize'); });

proof of concept fiddle

代码段

var toggle = true; google.maps.event.addDomListener(window, "load", function() { var map = new google.maps.Map(document.getElementById("map_div"), { center: new google.maps.LatLng(33.808678, -117.918921), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }); $('#infoWindow').click(function() { if (toggle) { $('#infoWindow').animate({ left: -160 }); $('#map_div').animate({ width: $('#map_div').width() + 160, left: 40 }, function() { google.maps.event.trigger(map, 'resize'); }); } else { $('#infoWindow').animate({ left: 0 }) $('#map_div').animate({ width: $('#map_div').width() - 160, left: 200 }, function() { google.maps.event.trigger(map, 'resize'); }); } toggle = !toggle; }); });

body { margin: 0; padding: 0; font: 12px sans-serif; } h1, p { margin: 0; padding: 0; } #map_div { z-index: 0; position: absolute; top: 0px; left: 200px; right: 0; bottom: 0px; width: calc(100% - 200px); } #infoWindow { z-index: 10; top: 0px; position: absolute; width: 200px; bottom: 0px; -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43); -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43); box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script> <div id="infoWindow"></div> <div id="map_div" style="height: 400px;"></div>

调整大小后，Google地图不会更新

1 个答案: