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

Question

Я хочу сбросить булавку на карте Google один раз. Следующий код заставит маркер отскочить, но он просто продолжает идти ...

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

Тогда звоню

myPin.setAnimation(null);

останавливает анимацию. Установка тайм-аута работает, но длительность отскока не выглядит как круглое число, так что

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

Сделать анимацию отказов преждевременно и выглядеть ужасно.

Кто-нибудь знает лучший способ сделать это?

Answer 1

Немного простого подхода: Похоже, что анимация отказов Google занимает ровно 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 мс с версии карты Google 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 в сочетании с методом .queue в jquery, чтобы новый запрос отказов не прерывал текущий, но все еще ставил его в очередь для выполнения последовательности отказов после текущий завершается. (примечание: я использовал два отскока вместо одного, поэтому для 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

Answer 5

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

if( marker.animating ) { return; }

Answer 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);
 }
};

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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