Question

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

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

不幸的是我无法评论它，因为我是stackoverflow的新手。

我的问题：

我在地图上工作，上面有几个标记。如果我点击一个标记，我希望它弹跳并通过我设置的不同图标切换其颜色。一切都很好，直到这一点，但目前我点击的所有标记都不会停止弹跳。我希望标记弹跳，直到我点击另一个标记。在这一点上，＆＃34; old＆＃34;标记应该停止弹跳，只是新的开始。

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

所以我从其他用户链接到的＃34; doublesharp＆＃34;中获得了此代码：

// 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代码中实现这一点。而且 - 我如何实现在它停止弹跳到＆＃34; visitedMarker＆＃34;之后切换图标？

非常感谢你！

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 Maps API - 弹跳标记问题2

1 个答案: