Google Maps API - バウンスマーカーの問題2

Question

私はjavascriptを初めて使っています。何か間違っていると私に悪いことを許してくれることを願っています。

実際、私はすでに問題を解決する方法を見つけましたが、自分のコードにどのように正確に反映させるかはわかりません。

Google Maps API - bouncing marker issue

私はstackoverflowの上で新たなんだので、残念ながら、私はそれをコメントすることはできません。

私の問題：私はそれにいくつかのマーカーをマップに取り組んでいます

。私がマーカをクリックすると、バウンスして別のアイコンで色を変えたいと思う。この時点までのすべての細かい、しかし、現時点で私がクリックしたすべてのマーカーは、バウンスを停止しません。別のマーカーをクリックするまで、マーカーがバウンスします。この時点で、「古い」マーカはバウンスを止め、新しいマーカを開始するだけです。

//Marker Icons 
var unvisitedMarker = 'img/m1.svg'; 
var activeMarker = 'img/m2.svg'; 
var visitedMarker = 'img/m3.svg'; 



//Add Marker Function 
function addMarker(props) { 
    marker = new google.maps.Marker({ 
     position: props.coords, 
     map: map, 
     icon: unvisitedMarker 
    }); 

    //Opens marker information 
    var marker.addListener('click', function() { 
     document.getElementById("paperContainer").style.top = '40vh'; 
     document.getElementById("locationBar").style.top = 'calc(40vh - 2em)'; 
     map.panTo(marker.getPosition()); 
     //Panby the map-position 
     map.panBy(0, 350); 
     //Set active Marker Icon 
     marker.setIcon(activeMarker); 
     //Set Marker Animation 
     marker.setAnimation(google.maps.Animation.BOUNCE); 
    }); 
} 

ので、私は、ユーザー「doublesharp」からリンクされている他のスレッドからこのコードを持って：私は私のOWMコードでこれを実装する方法を正確に知らない

// track marker that is currently bouncing 
var currentMarker = null; 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     document.getElementById('loc-info').innerHTML = html; 
     // remove the bounce from the "old" marker 
     if (currentMarker) currentMarker.setAnimation(null); 
     // set this marker to the currentMarker 
     currentMarker = marker; 
     // add a bounce to this marker 
     marker.setAnimation(google.maps.Animation.BOUNCE); 

    }); 
} 

。さらに、「visitedMarker」へのバウンスをやめた後、アイコンを切り替える方法を知りましたか？

ありがとうございます！

Answer 1

解決策は、クリックしたマーカーへの参照を保持し、新しいマーカーをクリックしたときにそのマーカーを変更することです。

は、これは私が何を意味するかである：それはバウンスのための魅力のように働いている

var currentMarker = null; // Define this variable preferably in the global context. 
.... 
marker.addListener('click', function() { 
    if(currentMarker){ // Check if there is already an active marker 
     currentMarker.setAnimation(null); 
     currentMarker.setIcon(visitedMarker); 
    } 
    currentMarker = marker;// Keep a reference to this marker because it will became active. 
    document.getElementById("paperContainer").style.top = '40vh'; 
    document.getElementById("locationBar").style.top = 'calc(40vh - 2em)'; 
    map.panTo(marker.getPosition()); 
    //Panby the map-position 
    map.panBy(0, 350); 
    //Set active Marker Icon 
    marker.setIcon(activeMarker); 
    //Set Marker Animation 
    marker.setAnimation(google.maps.Animation.BOUNCE); 
});