Question

我为标记设置动画BOUNCE。当我点击按钮隐藏标记。点击按钮显示以显示标记后，它之前没有动画。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
</script>
</head>
<script>
    var latlng = new google.maps.LatLng(21.0394475,105.7540192);
    var marker;
    function initialize(){
        var mapProp = {
          center:latlng,
          zoom:14,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"),mapProp);

        marker = new google.maps.Marker({
            icon: "http://maps.google.com/mapfiles/ms/micons/red.png",
            map: map,
            draggable: true,
            position: latlng,
            animation : google.maps.Animation.BOUNCE
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $(function(){
        $('#btn1').click(function(){
            marker.setVisible(false);
            console.log('hide animating = ' + marker.animating);
            console.log('hide animation = ' + marker.animation);
        });

        $('#btn2').click(function(){
            marker.setVisible(true);
            console.log('show animating = ' + marker.animating);
            console.log('show animation = ' + marker.animation);
        });
    })  
</script>
<body>
<div id="map" style="width:700px;height:480px;"></div>
<button id="btn1">Hide</button>
<button id="btn2">show</button>

我调试标记有属性动画：而且：我可以在按钮显示的功能点击中再次设置动画： google.maps.Animation.BOUNCE 。但我想知道为什么标记在点击按钮后丢失了动画？

Answer 1

visible属性似乎无法更改动画，但切换它会停止动画。如果要使用现有动画属性，可以使用以下命令重新启动动画：

  $('#btn2').click(function() {
    marker.setVisible(true);
    if (marker.getAnimation() != null) {
      marker.setAnimation(marker.getAnimation());
    }
  });

proof of concept fiddle

代码段

＆＃13;

function initialize() {
  var mapProp = {
    center: latlng,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), mapProp);

  marker = new google.maps.Marker({
    icon: "http://maps.google.com/mapfiles/ms/micons/red.png",
    map: map,
    draggable: true,
    position: latlng,
    animation: google.maps.Animation.BOUNCE
  });
}

$(function() {
  $('#btn1').click(function() {
    marker.setVisible(false);
    console.log('hide animating = ' + marker.animating);
    console.log('hide animation = ' + marker.animation);
  });

  $('#btn2').click(function() {
    marker.setVisible(true);
    console.log(marker.getAnimation());
    if (marker.getAnimation() != null) {
      marker.setAnimation(marker.getAnimation());
    }
    console.log('show animating = ' + marker.animating);
    console.log('show animation = ' + marker.animation);
  });
})
google.maps.event.addDomListener(window, 'load', initialize);
var latlng = new google.maps.LatLng(21.0394475, 105.7540192);
var marker;

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<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"></script>
<button id="btn1">Hide</button>
<button id="btn2">show</button>
<div id="map"></div>

＆＃13;

Answer 2

对于重新激活标记的按钮，您可以明确调用setAnimation方法

    $('#btn2').click(function(){
        marker.setVisible( true );
        marker.setAnimation( google.maps.Animation.BOUNCE );

        console.log('show animating = ' + marker.animating);
        console.log('show animation = ' + marker.animation);
    });

隐藏标记谷歌地图后丢失的动画标记

2 个答案: