Google Maps API - 弹跳标记问题 [英] Google Maps API - bouncing marker issue

问题描述

当选择一个标记时，我希望它弹跳。当我点击另一个标记时，我想让第一个标记停止弹跳，而另一个则开始弹跳。
我认为这可以通过简单的做到这一点

 函数bindInfoWindow（marker，map，infoWindow，html）{ 
 google.maps.event.addListener（marker，'click'，function（）{
 document.getElementById（'loc-info'）。innerHTML = html; 
 if（marker.getAnimation （）！= null）{
 marker.setAnimation（null）; 
} else {
 marker.setAnimation（google.maps.Animation.BOUNCE）; 
} 
}）; 
} 
  

相反，第一个标记会继续反弹，直到再次点击它为止我不想发生。
任何想法？

解决方案

您需要跟踪当前标记并将其动画设置为null弹跳新标记并将其设置为当前标记。

  //跟踪当前弹跳的标记
 var currentMarker = null; 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 document.getElementById 'loc-info'）。innerHTML = html; 
 //删除旧标记的反弹
 if（currentMarker）currentMarker.setAnimation（null）; 
 //设置此标记到当前标记
 currentMarker = marker; 
 //向此标记添加反弹
 marker.setAnimation（google.maps.Animation.BOUNCE）; 
 
}） ; 
} 
  

您之前的代码仅查看刚才点击的标记 - 如果它没有点击（开始状态），那么你会使其反弹。下一次点击检查它是否弹起（它），并停止它。如果您想再次点击以停止弹跳，您可以将相同的逻辑添加到上面的代码中。

When a marker is selected, I want it to bounce. When I click on another marker, I want the first one to stop bouncing, and the other to then start bouncing. I assumed that this was achievable by simple doing this

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
 document.getElementById('loc-info').innerHTML = html;
 if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
});
}

Instead, the first marker will continue to bounce until it is clicked again, which I don't want to happen. Any thoughts?

解决方案

You need to keep track of the "current" marker and set its animation to null before bouncing the new marker and setting it to the "current" marker.

// track marker that is currently bouncing
var currentMarker = null;

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        document.getElementById('loc-info').innerHTML = html;
        // remove the bounce from the "old" marker
        if (currentMarker) currentMarker.setAnimation(null);
        // set this marker to the currentMarker
        currentMarker = marker;
        // add a bounce to this marker
        marker.setAnimation(google.maps.Animation.BOUNCE);

    });
}

Your previous code is only looking at the marker that was just clicked - if it isn't clicking (the start state) then you make it bounce. The next click checks to see if it is bouncing (it is), and stops it. You could add the same logic to the code above if you want a second click to stop the bouncing.

这篇关于Google Maps API - 弹跳标记问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！