Question

我想在谷歌地图上反弹一次。以下代码将使标记反弹，但它只是继续......

myPin.setAnimation(google.maps.Animation.BOUNCE);

然后调用

myPin.setAnimation(null);

让动画停止。设置超时有效，但跳出的持续时间看起来不像是一个圆数，所以这样做

  setTimeout(function(){ myPin.setAnimation(null); }, 1000);

使弹跳动画过早结束并且看起来很糟糕。

有谁知道更好的方法来实现这个目标？

Answer 1

一个简单的方法：谷歌的反弹动画在一个周期内似乎需要750毫秒。因此，只需将超时设置为750毫秒，动画就会在第一次反弹结束时完全停止。适用于FF 7，Chrome 14和IE 8：

    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout(function(){ marker.setAnimation(null); }, 750);

Answer 2

目前还没有内置动画可以弹跳一次。

如果您对它反弹两次，那么我强烈建议你使用它：

marker.setAnimation(4);

Answer 3

好的，鉴于API的局限性，其他答案都没有得到足够的效果。所以这就是我发现的。

截至谷歌地图版本js?v=3.13，每次反弹约 700ms 。
调用marker.setAnimation(null)只会在标记完成当前反弹后停止标记。因此，如果您等到 710ms 在跳出序列中已过期，那么设置marker.setAnimation(null)后，API将继续执行额外的反弹，而不会中断其当前的跳出序列。
但是，如果您在同一个标记上再次立即呼叫setAnimation(700)，则会中断当前的跳出序列。不完全漂亮。
另请注意，如果您使用某种重叠式装饰标记，则不会将这些项目反弹，因为它们未附加到标记上。

简单案例（如其他答案所示）：

marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
    marker.setAnimation(null);
}, 700); // current maps duration of one bounce (v3.13)

假设：

从用户互动中发生弹跳
并且当用户在同一对象上触发另一个跳转序列时，您不希望截断当前的跳出序列
并且您不想放弃执行其他跳出序列的请求，

您可以将setTimout与jquery的.queue方法结合使用，以防止新的退回请求中断当前的退回请求，但仍然将其排队以执行之后的跳出序列 >目前的一个完成。（注意：我使用了两次弹跳而不是一次，因此msec设置为1400）。

更现实的案例：

// bounce markers on hover of img $('#myImage').hover(function () { // mouseenter var marker = goGetMarker(); function bounceMarker() { marker.setAnimation(google.maps.Animation.BOUNCE); setTimeout(function () { marker.setAnimation(null); $(marker).dequeue(); }, 1400); // timeout value lets marker bounce twice before deactivating } // use jquery queue if ($(marker).queue().length <= 1) // I'm only queuing up 1 extra bounce $(marker).queue(bounceMarker); }, function () { // mouseleave var marker = goGetMarker(); marker.setAnimation(null); });

Answer 4

使用此代码：

animation:google.maps.Animation.DROP

Answer 5

这是一个没有完美答案的硬盘，因为虽然750毫秒适用于桌面浏览器，但它确实在移动设备上看起来很不好。谷歌并没有真正为动画API添加太多内容，因此没有基于API的解决方案。

我能够完成的最好的事情是将超时值设置为900毫秒，它在桌面上看起来是一样的，因为它利用了图标在每次反弹之间暂停的150毫秒，并提供了一个滞后的移动设备动画时间的额外呼吸空间。

编辑：我的解决方案突然停止为我工作。哎呀。如果你是在移动设备上进行此操作，可能最好不要费心去反弹。

Answer 6

谢谢，为了得到答案，我只是加入了一点毫秒

function toggleBounce(currentIcon) {
 currentIcon.setAnimation(null);

if (currentIcon.getAnimation() != null) {
  currentIcon.setAnimation(null);
 } else {
   currentIcon.setAnimation(google.maps.Animation.BOUNCE);
   setTimeout(function(){ currentIcon.setAnimation(null); }, 900);
 }
};

Answer 7

只需注意：如果您在多个标记上触发此操作，则在调用{{1}之前，您需要通过添加以下代码来检查以确保标记当前没有动画效果}}：

marker.setAnimation( google.maps.Animation.BOUNCE );

Answer 8

我发现为了在弹跳完成后引脚停止动画，你需要使引脚可拖动。我发现这样做的最好方法是使用两个超时：

在第一次退回完成之前删除动画。
在第一次反弹完成后使标记不可拖动。

制作无法拖动的标记后，动画将停止。我已经创建了一个用来表明我的意思：http://plnkr.co/edit/Gcns3DMklly6UoEJ63FP?p=preview

HTML

    <div id="map-canvas"></div>
    <p>
      Bounce marker
      <select id="bounceNumber">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
      times.
      <button onclick="bounceMarker()">Go!</button>
    </p>

JavaScript

var marker = null,
    toBounce = null,
    toDrag = null;

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-25.363882, 131.044922),
        map: map
    });
}

function bounceMarker() {
    var select = document.getElementById("bounceNumber"),
        bounces = parseInt(select.options[select.selectedIndex].value),
        animationTO = (bounces - 1) * 700 + 350,
        dragTO = animationTO + 1000;

    // Bounce the marker once
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
        clearTimeout(toBounce);
        clearTimeout(toDrag);
        setTimeout(function () {
            marker.setDraggable(false);
        }, 750);
    } else {
        // Workaround to make marker bounce once.
        // The api will finish the current bounce if a marker is set to draggable.
        // So use two timeouts:
        // 1. to remove the animation before the first bounce is complete.
        // 2. to make the marker not draggable after the first bounce is complete.
        // Animations will stop once you make a marker not draggable.
        marker.setDraggable(true);
        marker.setAnimation(google.maps.Animation.BOUNCE);
        toBounce = setTimeout(function () {
            marker.setAnimation(null);
        }, animationTO);
        toDrag = setTimeout(function () {
            marker.setDraggable(false);
        }, dragTO);
    }
}


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

据我所知，这可以跨浏览器。我测试过chrome，firefox，safari＆amp;歌剧。我还没有在Internet Explorer中测试过这个。

Answer 9

  marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function() {
             marker.setAnimation(null)
        }, 6000);

一次在谷歌地图中弹出一个图钉

9 个答案: