-1

Je suis nouveau sur javascript, j'espère que vous me pardonnerez mon mal si je fais quelque chose de mal.API Google Maps - problème de marqueur bouncing 2

En fait, j'ai déjà trouvé une solution à mon problème, mais je ne comprends pas exactement comment l'intégrer dans mon propre code.

Google Maps API - bouncing marker issue

Malheureusement, je ne peux pas commenter parce que je suis nouveau sur stackoverflow.

Mon problème:

Je travaille sur une carte avec plusieurs marqueurs sur elle. Si je clique sur un marqueur, je veux le faire rebondir et changer sa couleur par une icône différente que je définis. Tout va bien jusqu'à ce point, mais pour le moment, tous les marqueurs sur lesquels j'ai cliqué n'arrêteront pas de rebondir. Je veux que le marqueur rebondisse, jusqu'à ce que je clique sur un autre marqueur. À ce stade, le «vieux» marqueur devrait cesser de rebondir et juste le nouveau commence.

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

alors je suis ce code de l'autre thread i lié de l'utilisateur "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); 

    }); 
} 

Je ne sais pas exactement comment implémenter cela dans mon code owm. Et plus loin - comment est-ce que je suis réalisé pour changer l'icône après qu'elle ait cessé de rebondir sur le "visitedMarker"?

Merci beaucoup d'avance!

Répondre

0

L'idée de cette solution est de garder une référence au marqueur cliqué et de modifier ce marqueur quand un nouveau est cliqué.

C'est ce que je veux dire:

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

Il fonctionne comme un charme pour le rebondissement et je comprends maintenant comment ça marche! Mais l'icône ne passe pas à celle "visitée". L'image est dans le bon répertoire, mais le code de youre semble être correct aussi. Avez-vous une idée de ce que le problème pourrait être? – Flo

+0

On dirait que c'est à cause du positionnement dans le code. Même si l'icône de marqueur est définie sur "visitedMarker", la ligne marker.setIcon (activeMarker) vient après et remplace la visitée à nouveau. Ai-je raison? – Flo

+0

@Flo J'ai fait une erreur dans mon exemple. C'est réparé maintenant. J'utilisais 'marker.setIcon (visitedMarker)' au lieu de 'currentMarker.setIcon (visitedMarker)'. – Titus