Google 地图 API - 弹跳标记问题 2

Question

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

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

Google Maps API - bouncing marker issue

不幸的是我不能评论它，因为我是 Whosebug 的新手。

我的问题：

我正在制作一张带有多个标记的地图。如果我点击一个标记，我希望它弹跳并通过我设置的不同图标切换它的颜色。到目前为止一切正常，但目前我点击的所有标记都不会停止弹跳。我想要标记弹跳，直到我点击另一个标记。此时 "old" 标记应该停止弹跳，只有新的开始。

//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":

链接的另一个线程得到了这段代码

// 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 代码中实现它。更进一步 - 我如何实现在图标停止弹跳到 "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);
});

Google 地图 API - 弹跳标记问题 2

Google Maps API - bouncing marker issue 2

javascript

google-maps

google-maps-api-3

google-maps-markers