5

私はグーグルマップ、ラhttps://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimationsにマーカーの「追加」をアニメートできることを知っています

とにかく、マップからマーカーを削除するための逆アニメーションを実行できますか？マーカーの削除時にマップの一番上に戻るようにしたいのですが...それは可能ですか？

これまでの私の削除コードは次のとおりです（マップから削除するだけで、アニメーションはありません）：

// TODO figure out if there is a way to animate this removal, like the add
$.contextualMap.prototype.removeMarker = function(m) {
  m.mapMarker.setMap(null);
  m.mapMarker = null;
};
4

2 に答える 2

13

google.maps.Animationはドロップの逆アニメーションをサポートしていないため、マーカーをアニメーション化するための独自のスクリプトを作成する必要があります。

あなたはこのようなものを書くことができます：

function removeMarkerWithAnimation(map, marker){
    (function animationStep(){
        //Converting GPS to World Coordinates
        var newPosition = map.getProjection().fromLatLngToPoint(marker.getPosition());

        //Moving 10px to up
        newPosition.y -= 10 / (1 << map.getZoom()); 

        //Converting World Coordinates to GPS 
        newPosition = map.getProjection().fromPointToLatLng(newPosition);
        //updating maker's position
        marker.setPosition( newPosition );
        //Checking whether marker is out of bounds
        if( map.getBounds().getNorthEast().lat() < newPosition.lat() ){
            marker.setMap(null);
        }else{
            //Repeating animation step
            setTimeout(animationStep,10);
        }
    })();
}

これがデモです：

于 2012-04-16T18:17:04.297 に答える
-1

私の考え：

  1. フライングマーカーピンのアニメーションGIFを作成し、その後フェードアウトします。
  2. マーカー削除イベントで、スワップiconしてGIFを表示します
  3. GIFを作成したので、アニメーションの時間の長さを知っておく必要があります。次に、この値を使用してsetTimeoutを実行し、setMap（null）を呼び出します。

考えられる多くの欠点の1つである、イベントの伝播を妨げている可能性があります。

于 2012-04-16T17:41:16.123 に答える