在谷歌地图中反弹一针

Question

我想在谷歌地图上反弹一次。下面的代码将使标记反弹，但它只是不断去......

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

然后调用

myPin.setAnimation(null); 

使动画停止。设置超时工作，但反弹的持续时间并不像它是一个圆形的号码，这样

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

使反弹动画过早结束，并期待可怕。

有没有人知道有更好的方法来完成这个？

Answer 1

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

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

Answer 2

这是一个艰难的一个，没有完美的答案了，因为当罚款桌面浏览器为750ms的作品，它看起来在移动设备上发育不良。谷歌并没有真正增加动画API，所以没有通过API的解决方案。

最好的我已经能够做到的是要将超时值设置为900毫秒，它看起来在桌面上一样的，因为它利用了150ish MS该图标每次弹跳之间暂停，并给出了一个laggy移动设备的一些动画时间的额外呼吸空间。

编辑：我的解决方案突然停止工作。哎呀。如果你在移动设备上这样做，最好不要打扰反弹。

Answer 3

感谢，为很好的答案，我只是集成平添几分millisenconds的

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 4

其他的答案好了没有给出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. ，你不想放弃执行另一个反弹序列要求，

您可以结合使用setTimout与jQuery的.queue方法来防止中断当前一个，但还是排队它新的反弹要求在之后执行当前的完成后的反弹序列。 （注意：我用了两次反弹，所以毫秒设置为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 5

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

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

一旦您使标记不可拖动，动画将停止。我创建了一个plunker来说明我的意思：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 &歌剧中测试过。我还没有在Internet Explorer中测试过。

Answer 6

只是注意：如果你触发这对多个标记，你要检查，以确保标记不是目前加入以下代码调用marker.setAnimation(google.maps.Animation.BOUNCE);之前动画：

if(marker.animating) { return; }

Answer 7

目前没有内置的动画弹跳一次。

如果你确定它弹跳两次那么我强烈建议你使用这个：

marker.setAnimation(4);

Answer 8

使用此代码：

animation:google.maps.Animation.DROP 

Answer 9

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