Откачать булавку на картах Google один раз

Ответ 1

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

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

Ответ 2

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

• Каждый отскок примерно 700 мс по версии Google Maps js?v=3.13.
• Вызов marker.setAnimation(null) останавливает маркер от bouncing только после того, как он завершает текущий отскок. Итак, если вы дождитесь, пока 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);
});

Ответ 3

На данный момент нет встроенной анимации для подпрыгивания один раз.

Если у вас все в порядке, если он подпрыгивает дважды, я настоятельно рекомендую вам использовать это:

marker.setAnimation(4);

Ответ 4

используйте этот код:

animation:google.maps.Animation.DROP

Ответ 5

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

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

Изменить: Мое решение перестало работать для меня внезапно. К сожалению. Если вы делаете это на мобильном телефоне, лучше всего не беспокоиться об отказе.

Ответ 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);
 }
};

Ответ 7

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

• чтобы удалить анимацию до завершения первого отскока.
• чтобы маркер не перетаскивался после завершения первого отскока.

Анимация остановится, как только вы сделаете маркер не перетаскиваемым. Я создал плункер, чтобы показать, что я имею в виду: 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);

Насколько мне известно, это работает в браузере. Я тестировал хром, firefox, сафари и оперу. Я еще не тестировал это в Internet Explorer.

Ответ 8

Просто заметьте: если вы запускаете это на нескольких маркерах, вам нужно проверить, чтобы маркер не анимировался, добавив следующий код, прежде чем вы вызовете marker.setAnimation( google.maps.Animation.BOUNCE );:

if( marker.animating ) { return; }

Ответ 9

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