Google Map隐藏Marker后重新显示丢失BOUNCE动画问题求助

这个问题我做项目时也碰到过，核心原因是：当你通过setVisible(false)隐藏Marker后，Google Maps的Marker实例会重置自身的动画状态，再次调用setVisible(true)显示时，不会自动恢复之前的BOUNCE动画。下面给你两种实用的解决办法：

方法一：显示Marker时直接重新设置动画 #

这是最简单直接的方式，在点击显示按钮、调用setVisible(true)之后，手动重新为Marker设置BOUNCE动画。结合你的代码，修改后的示例如下：

var latlng = new google.maps.LatLng(21.0394475,105.7540192);
var marker;
var map;

function initMap() {
  // 初始化地图
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: latlng
  });
  
  // 创建带BOUNCE动画的Marker
  marker = new google.maps.Marker({
    position: latlng,
    map: map,
    animation: google.maps.Animation.BOUNCE
  });
}

// 隐藏按钮点击事件
$('#hideBtn').on('click', function() {
  marker.setVisible(false);
});

// 显示按钮点击事件
$('#showBtn').on('click', function() {
  marker.setVisible(true);
  // 重新设置BOUNCE动画
  marker.setAnimation(google.maps.Animation.BOUNCE);
});

// 页面加载完成后初始化地图
$(document).ready(function() {
  initMap();
});

方法二：保存动画状态，显示时恢复 #

如果你的Marker可能有多种动画切换需求，或者不想每次都硬编码动画类型，可以在隐藏Marker前先保存当前的动画状态，显示时再恢复：

var latlng = new google.maps.LatLng(21.0394475,105.7540192);
var marker;
var map;
var currentMarkerAnimation; // 用于保存当前动画状态

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: latlng
  });
  
  marker = new google.maps.Marker({
    position: latlng,
    map: map,
    animation: google.maps.Animation.BOUNCE
  });
  // 初始化时保存初始动画
  currentMarkerAnimation = marker.getAnimation();
}

// 隐藏按钮点击事件
$('#hideBtn').on('click', function() {
  // 隐藏前保存当前动画
  currentMarkerAnimation = marker.getAnimation();
  marker.setVisible(false);
});

// 显示按钮点击事件
$('#showBtn').on('click', function() {
  marker.setVisible(true);
  // 如果之前有保存的动画，就恢复
  if (currentMarkerAnimation) {
    marker.setAnimation(currentMarkerAnimation);
  }
});

$(document).ready(function() {
  initMap();
});

两种方法都能解决你的问题，第一种适合需求简单的场景，第二种更灵活，能适配多种动画切换的情况。

内容的提问来源于stack exchange，提问作者TungHarry