web-dev-qa-db-ja.com

Googleマップでピンを1回バウンスする

Googleマップでピンを1回バウンスしたい。次のコードはマーカーをバウンスさせますが、そのまま続行します...

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

次に電話する

myPin.setAnimation(null);

アニメーションを停止します。タイムアウトの設定は機能しますが、バウンスの継続時間はそれが丸い数値ではないようなので、これを行う

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

バウンスアニメーションを途中で終了させ、ひどく見えるようにします。

誰かがこれを達成するためのより良い方法を知っていますか？

javascriptgoogle-mapsanimation
27
Patrick Arlt

少し単純なアプローチ：Googleのバウンスアニメーションは、1サイクルで正確に750ミリ秒かかるようです。したがって、単にタイムアウトを750ミリ秒に設定すると、アニメーションは最初のバウンスの終わりに正確に停止します。 FF 7では、Chrome 14およびIE 8：

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

現時点では、一度バウンスするための組み込みのアニメーションはありません。

twiceのバウンスで問題がなければ、これを使用することを強くお勧めします。

marker.setAnimation(4);

10
Mikael

APIの制限を考えると、他の回答はどれも十分に機能しませんでした。これが私が見つけたものです。

  • 各バウンスは、Googleマップバージョン_js?v=3.13_で約700msです。
  • 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_ メソッドと組み合わせて使用​​すると、新しいバウンス要求が現在の要求を中断するのを防ぎながら、キューに入れてバウンスシーケンスを実行できますafter現在のものが完了した後。 （注：1つではなく2つのバウンスを使用したため、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);
});
_
7
johntrepreneur

このコードを使用してください：

animation:google.maps.Animation.DROP
5
Saeed sdns

注：複数のマーカーでこれをトリガーしている場合は、marker.setAnimation( google.maps.Animation.BOUNCE );を呼び出す前に次のコードを追加して、マーカーが現在アニメーション化していないことを確認する必要があります。

if( marker.animating ) { return; }

2
Zack Katz

750msはデスクトップブラウザでは正常に動作しますが、モバイルデバイスでは発育が妨げられているように見えるため、これはまだ完璧な答えはありません。 GoogleはアニメーションAPIにあまり多くを追加していないため、APIを介したソリューションはありません。

私が達成できた最高の方法は、タイムアウト値を900ミリ秒に設定することです。これは、アイコンが各バウンス間で一時停止する150ミリ秒のミリ秒を利用し、ラグのあるモバイルデバイスにアニメーション用の余分な呼吸スペースを与えるため、デスクトップ上で同じに見えます時間。

編集：私のソリューションが突然機能しなくなりました。おっとっと。モバイルでこれを行っている場合は、バウンスをまったく気にしない方がよいでしょう。

2
Rob Porter

良い答えをありがとう、ミリセンコンドを追加して統合しました

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);
 }
};
2
asael2

バウンスの完了後にピンがアニメーションを停止するには、ピンをドラッグ可能にする必要があることがわかりました。これを行うために見つけた最良の方法は、2つのタイムアウトを使用することです。

  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でまだテストしていません。

1
thuijssoon
  marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function() {
             marker.setAnimation(null)
        }, 6000);
0
Nikit Barochiya