谷歌地图API - 弹跳标记问题2

Question

我是新来的JavaScript，希望你会原谅我我不好，如果我做错了什么。

事实上，我已经找到了我的问题的解决方案，但我没有得到如何把它放入我自己的代码中。

Google Maps API - bouncing marker issue

不幸的是我不能只是发表评论，因为我是在计算器新。

我的问题：

我的工作与地图上的就可以了几个标记。如果我点击一个标记，我希望它弹跳并通过我设置的另一个图标切换它的颜色。一切都很好，直到这一点，但目前我点击的所有标记不会停止反弹。我想要标记弹起，直到我点击另一个标记。此时，“旧”标记应该停止反弹，只是新的标记开始。

// 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); 

    }); 
} 

我不知道如何在我的OWM代码来实现这一点：

//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”链接得到这个代码。还有 - 我怎么才能意识到在它停止弹跳到“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); 
});