Google 地图 api 与 jquery 幻灯片的集成存在动画故障

Question

我在滑动 div 中有一张 google 地图。

当您第一次向下滑动地图时，您会注意到当您单击时会出现 jerky/clunky 的小故障或动画。知道如何解决这个问题吗？有什么建议吗？

$(document).ready(function() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  $('.map-triangle').find('div').click(function() {
    $('.map-slide').slideToggle('slow');
    var map = new google.maps.Map(mapCanvas, mapOptions);
  });

});

.map-triangle {
  color: #ffffff;
  text-align: center;
  padding: 0 70px;
  z-index: 1;
}
.map-triangle > div {
  background: green;
  background-size: 100%;
  padding-bottom: 10px;
  padding-top: 4px;
  transition: all 0.5s ease;
}
.map-triangle > div:hover {
  /*cursor: pointer;*/
}
.map-anchor:hover > .map-triangle > div {
  background: red;
  background-size: 100%;
}
.map-slide {
  position: absolute;
  display: none;
  z-index: 1;
}
#map-canvas {
  width: 400px;
  height: 280px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">
  <div class="col-lg-12 col-md-12" style="z-index: 2">
    <a href="#" class="map-anchor">
      <div class="map-triangle">
        <div>
          map
        </div>
      </div>
    </a>

  </div>
  <div class="col-lg-12 col-md-12 map-slide">
    <div id="map-canvas"></div>
  </div>
</div>

非常感谢您的帮助。代码片段也有效。

Answer 1

这个糟糕的动画的原因是你同时制作动画和地图的初始化所以它在动画时加载。我在你的代码中添加了这个

 $('.map-triangle').find('div').click(function() {

var map = new google.maps.Map(mapCanvas, mapOptions);
  google.maps.event.addListenerOnce(map, 'idle', function(){
      $('.map-slide').slideToggle('slow', function(){
      google.maps.event.trigger(map, 'resize');
      });
  });

通过这个示例，您会发现动画效果要好得多。

你连上滑的时候都在重新初始化地图，你不能。

尝试写下滑和上滑事件，而不是切换

Google 地图 api 与 jquery 幻灯片的集成存在动画故障

Google map api intigration with jquery slide has animation glitches

html

css

jquery

google-maps

google-api