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

我是javascript新手，如果我做错了什么，希望你能原谅我的过错

事实上，我已经为我的问题找到了一个解决方案，但我不知道如何将它准确地输入到我自己的代码中

不幸的是，我不能仅仅评论它，因为我是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代码中实现这一点。此外，如何实现在图标停止反弹后切换到“visitedMarker”

---

提前非常感谢

该解决方案的思想是保留对已单击标记的引用，并在单击新标记时修改该标记

这就是我的意思：

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

---

它的工作就像一个魅力的反弹，我现在明白它是如何工作的！但图标不会切换到“已访问”图标。图像位于正确的目录中，但您的代码似乎也正常。你知道问题可能是什么吗？似乎是因为代码中的定位。即使标记图标get设置为“visitedMarker”，line marker.setIcon（activeMarker）也会出现在之后，并再次覆盖已访问的标记。我说的对吗？@Flo我在我的例子中犯了一个错误。现在修好了。我使用的是

marker.setIcon（visitedMarker）

而不是

currentMarker.setIcon（visitedMarker）

@Flo如果这个答案解决了你的问题，别忘了标记它。顶部！非常感谢你，它正在正常工作！

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