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

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的局限性,其他答案都没有得到足够的效果.所以这就是我发现的.

• 谷歌地图版本每次反弹约700毫秒js?v=3.13.
• 只有在完成当前弹跳后,调用才会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)

假如说:

1. 弹跳发生在用户交互中
2. 并且当用户在同一对象上触发另一个跳过序列时,您不希望截断当前的跳出序列
3. 并且您不想放弃执行另一个跳出序列的请求,

您可以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