谷歌地图 api 与 jquery 幻灯片的集成存在动画故障答案

【问题标题】：Google map api intigration with jquery slide has animation glitches谷歌地图 api 与 jquery 幻灯片的集成存在动画故障
【发布时间】：2015-04-27 09:28:50
【问题描述】：

我在滑动 div 中有一个谷歌地图。

fiddle

当您第一次在地图上滑动时，您会注意到点击时会出现一些小故障或动画变得生涩/笨拙。知道如何解决这个问题吗？有什么建议吗？

$(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>

非常感谢您的帮助。代码 sn-p 也可以。

【问题讨论】：

标签： jquery html css google-maps google-api

【解决方案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');
      });
  });

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

你甚至在向上滑动时重新初始化地图，你不能。

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

【讨论】：