Отскок пин-кода на картах Google один раз

Хорошо, ни один из других ответов не работал достаточно хорошо, учитывая ограничения API. Итак, вот что я нашел.

• Каждый отскок составляет около 700 мс в версии Google Maps 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);
});

Немного простой подход: анимация отказов Google, по-видимому, занимает ровно 750 мс за один цикл. Таким образом, просто установите время ожидания на 750 мс, и анимация остановится точно в конце первого отскока. У меня работает на FF 7, Chrome 14 и IE 8:

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

Это сложный вопрос, на который пока нет идеального ответа, потому что, хотя 750 мсек отлично работает для настольного браузера, на мобильном устройстве он выглядит чахлым. Google на самом деле мало что добавил в API анимации, поэтому нет никаких решений через API.

Лучшее, что мне удалось сделать, - это установить значение тайм-аута на 900 мс, оно выглядит одинаково на рабочем столе, потому что оно использует 150-миллисекундный интервал, когда иконка останавливается между каждым отскоком, и дает медленное мобильное устройство немного дополнительного передышки для анимации.