Javascript 在谷歌地图中弹回一次图钉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7339200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bounce a pin in google maps once
提问by Patrick Arlt
I want to bounce a pin on a google map once. The following code will make the marker bounce but it just keeps going...
我想在谷歌地图上弹一次图钉。下面的代码将使标记反弹，但它只是继续...
myPin.setAnimation(google.maps.Animation.BOUNCE);
Then calling
然后打电话
myPin.setAnimation(null);
makes the animation stop. Setting a timeout works but the duration of a bounce doesn't look like it is a round number so doing this
使动画停止。设置超时有效，但反弹的持续时间看起来不像是一个整数，所以这样做
setTimeout(function(){ myPin.setAnimation(null); }, 1000);
Make the bounce animation end prematurely and look terrible.
使反弹动画过早结束并且看起来很糟糕。
Does anyone know of a better way to accomplish this?
有谁知道更好的方法来实现这一目标？
回答by Simon Steinberger
Bit of a simple approach: Google's bounce animation appears to take exactly 750 ms for one cycle. Thus, simply set the timeout to 750 ms and the animation will stop exactly at the end of the first bounce. Works for me on FF 7, Chrome 14 and IE 8:
一个简单的方法：谷歌的弹跳动画似乎在一个周期内恰好需要 750 毫秒。因此，只需将超时设置为 750 毫秒，动画就会在第一次反弹结束时准确停止。适用于 FF 7、Chrome 14 和 IE 8：
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function(){ marker.setAnimation(null); }, 750);
回答by Mikael
At the moment there is no built in animation for bouncing once.
目前没有内置动画可以弹跳一次。
If you are OK with it bouncing twicethen i strongly suggest that you use this:
如果你对它弹跳两次没问题，那么我强烈建议你使用这个：
marker.setAnimation(4);
marker.setAnimation(4);
回答by johntrepreneur
Okay none of the other answers quite worked well enough given the limitations of the API. So here's what I've found.
好吧，鉴于 API 的限制，其他答案都不够好。所以这就是我发现的。
- Each bounce is about 700msas of google maps version
js?v=3.13. - Calling
marker.setAnimation(null)stops the marker from bouncing only after it completes the current bounce.So if you wait until 710mshave expired in the bounce sequence and then setmarker.setAnimation(null), the API will continue to perform an additional bounce without interrupting its current bounce sequence. - However, if you then immediately call
setAnimation(700)again on that same marker it will interrupt the current bounce sequence.Not exactly pretty. - Also note, that if you're decorating the marker with an overlay of some sort, it won't bounce those items as they are not attached to the marker.
- 从谷歌地图版本开始，每次反弹大约是700 毫秒
js?v=3.13。 - 只有在完成当前弹跳后，调用才会
marker.setAnimation(null)停止标记弹跳。因此，如果您等到反弹序列中的710 毫秒到期然后再设置marker.setAnimation(null)，则 API 将继续执行额外的反弹，而不会中断其当前的反弹序列。 - 但是，如果您随后立即
setAnimation(700)在同一标记上再次调用，它将中断当前的反弹序列。不完全漂亮。 - 另请注意，如果您用某种覆盖物装饰标记，它不会弹回这些物品，因为它们没有附着在标记上。
Simple case (as seen in the other answers):
简单案例（如其他答案所示）：
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
marker.setAnimation(null);
}, 700); // current maps duration of one bounce (v3.13)
Assuming that:
假如说：
- the bouncing occurs from user interaction
- and you don't want to truncate a current bounce sequence when the user triggers another one on the same object
- and you don't want to discard that request to perform another bounce sequence,
- 弹跳发生在用户交互中
- 并且当用户在同一对象上触发另一个弹跳序列时，您不希望截断当前弹跳序列
- 并且您不想放弃该请求以执行另一个退回序列，
you can use setTimoutin conjunction with jquery's .queuemethod to prevent a new bounce request from interrupting the current one, but still queuing it up to perform the bounce sequence afterthe current one completes. (note: I used two bounces instead of one so msec is set to 1400).
您可以setTimout与jquery的.queue方法结合使用，以防止新的弹跳请求中断当前请求，但仍将其排队以在当前完成后执行弹跳序列。（注意：我使用了两次反弹而不是一次，因此毫秒设置为 1400）。
more realistic case:
更现实的案例：
// 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);
});
回答by Saeed sdns
use this code:
使用此代码：
animation:google.maps.Animation.DROP
回答by Zack Katz
Just a note: if you're triggering this on multiple markers, you'll want to check to make sure the marker's not currently animating by adding the following code before you call marker.setAnimation( google.maps.Animation.BOUNCE );:
请注意：如果您在多个标记上触发此操作，您需要在调用之前通过添加以下代码来检查以确保标记当前未设置动画marker.setAnimation( google.maps.Animation.BOUNCE );：
if( marker.animating ) { return; }
if( marker.animating ) { return; }
回答by Rob Porter
This is a tough one with no perfect answer yet because, while 750ms works fine for a desktop browser, it does look stunted on a mobile device. Google has not really added much to the animation API, so there's no solutions via API.
这是一个棘手的问题，目前还没有完美的答案，因为虽然 750 毫秒对于桌面浏览器来说效果很好，但它在移动设备上看起来确实很受阻。Google 并没有真正为动画 API 添加太多内容，因此没有通过 API 的解决方案。
The best I've been able to accomplish is to set the timeout value to 900ms, it looks the same on Desktop because it exploits the 150ish ms that the icon pauses between each bounce, and gives a laggy mobile device some extra breathing space for animation time.
我能够完成的最好的事情是将超时值设置为 900 毫秒，它在桌面上看起来是一样的，因为它利用了图标在每次弹跳之间暂停的 150 毫秒，并为滞后的移动设备提供了一些额外的动画呼吸空间时间。
Edit: My solution stopped working for me suddenly. Oops. If you're doing this on mobile, might just be best to not bother with the bounce at all.
编辑：我的解决方案突然停止为我工作。哎呀。如果您在移动设备上执行此操作，最好完全不要理会弹跳。
回答by asael2
Thanks, for the good answer, I just integrated adding a bit of 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);
}
};
回答by thuijssoon
I have found that in order for a pin to stop animating after a bounce is completed, you need to make the pin draggable. The best way I have found to do this is by using two timeouts:
我发现为了让引脚在弹跳完成后停止动画，您需要使引脚可拖动。我发现这样做的最好方法是使用两个超时：
- to remove the animation before the first bounce is complete.
- to make the marker not draggable after the first bounce is complete.
- 在第一次反弹完成之前移除动画。
- 使标记在第一次弹跳完成后不可拖动。
Animations will stop once you make a marker not draggable. I have created a plunker to show what I mean: http://plnkr.co/edit/Gcns3DMklly6UoEJ63FP?p=preview
一旦您使标记不可拖动，动画就会停止。我创建了一个 plunker 来说明我的意思：http://plnkr.co/edit/Gcns3DMklly6UoEJ63FP?p=preview
The HTML
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>
The JavaScript
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);
For as far as I am aware this works cross browser. I have tested in chrome, firefox, safari & opera. I haven't tested this in internet explorer yet.
据我所知，这适用于跨浏览器。我已经在 chrome、firefox、safari 和opera 中进行了测试。我还没有在 Internet Explorer 中测试过这个。
回答by Nikit Barochiya
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
marker.setAnimation(null)
}, 6000);
