Google maps api revert icon style ändern

Question

Ich erstelle eine Karte, wo bei Mouseover, das Symbol schwebt ändert Stil, das funktioniert gut, das Problem ist, wenn ein zweiter Marker schwebt, brauche ich den ersten Marker zu gehen zurück zum ursprünglichen Stil, kann aber keinen Weg finden, es zu tun. Hier ist der Code, der gerade funktioniert, würde einen Hinweis darauf schätzen, wo ich versuchen sollte, dies zu konfrontieren. Dank

var infoWindow = new google.maps.InfoWindow(); 
         var markerGroups = { 
          "Wavelength": [], 
          "Wavelength_100G": [], 
          "Ethernet": [], 
          "IP_Transit": [], 
          "Video": [], 
          "CDN": [] 
         }; 

         function load() { 
          var map = new google.maps.Map(document.getElementById("map"), { 
           center: new google.maps.LatLng(38.639104, -8.210413), 
           zoom: 3 
          }); 
          //var infoWindow = new google.maps.InfoWindow(); 



          map.set('styles', [{zoomControl: false}, 
           {"elementType": "labels", "stylers": [{"visibility": "off"}]}, 
           {"featureType": "administrative", "stylers": [{"visibility": "off"}]}, 
           {"featureType": "landscape", "stylers": [{"color": "#0b223a"}]}, 
           {"featureType": "poi", "stylers": [{"visibility": "off"}]}, 
           {"featureType": "road", "stylers": [{"visibility": "off"}]}, 
           {"featureType": "transit", "stylers": [{"visibility": "off"}]}, 
           {"featureType": "water", "stylers": [{"color": "#0b5ca2"}]} 

          ]); 

          downloadUrl("../markers/points.php", function (data) { 
           //console.log(data); 
           //var xml = xmlParse(data.response); 
           var xml = data.responseXML; 
           var markers = xml.documentElement.getElementsByTagName("marker"); 
           for (var i = 0; i < markers.length; i++) { 
            //alert(markers[i].getAttribute("name")); 
            var name = markers[i].getAttribute("name"); 
            var address = markers[i].getAttribute("address"); 
            var type = markers[i].getAttribute("type"); 

            var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")), 
              parseFloat(markers[i].getAttribute("lng"))); 
            var html = "<b>" + name + "</b> <br/>" + address; 
            // var icon = customIcons[type] || {}; 

            var marker = createMarker(point, name, address, type, map); 
            bindInfoWindow(marker, map, infoWindow, html); 


           } 
          }); 
         } 
         function createMarker(point, name, address, type, map) { 

          var marker = new google.maps.Marker({ 
           map: map, 
           position: point, 
           icon: { 
            path: google.maps.SymbolPath.CIRCLE, 
            scale: 3, 
            strokeWeight: 1.5, 
            strokeColor: "#01B04C", 
            fillColor: "#0b223a", 
            fillOpacity: 1.0 
           }, 
           // shadow: icon.shadow, 
           type: type, 
          }); 
          if (!markerGroups[type]) 
           markerGroups[type] = []; 
          markerGroups[type].push(marker); 
          var html = "<b>" + name + "</b> <br/>" + address; 
          bindInfoWindow(marker, map, infoWindow, html); 
          return marker; 
         } 

         function toggleGroup(type) { 
          for (var i = 0; i < markerGroups[type].length; i++) { 
           var marker = markerGroups[type][i]; 
           if (!marker.getVisible()) { 
            marker.setVisible(true); 
           } else { 
            marker.setVisible(false); 
           } 
          } 
         } 

         function bindInfoWindow(marker, map, infoWindow, html) { 
          google.maps.event.addListener(marker, 'mouseover', function (markerGroups) { 

           } 

           this.setIcon({ 
            path: google.maps.SymbolPath.CIRCLE, 
            scale: 3, 
            strokeWeight: 1.5, 
            strokeColor: "#01B04C", 
            fillColor: "#F26522", 
            fillOpacity: 1.0 
           }); 
           $("#res").html(html); 
          } 
          ); 
         } 

         function downloadUrl(url, callback) { 
          var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

          request.onreadystatechange = function() { 
           if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
           } 
          }; 

          request.open('GET', url, true); 
          request.send(null); 
         } 

         function doNothing() {} 
         google.maps.event.addDomListener(window, 'load', load); 

         function xmlParse(str) { 
          if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { 
           var doc = new ActiveXObject('Microsoft.XMLDOM'); 
           doc.loadXML(str); 
           return doc; 
          } 

          if (typeof DOMParser != 'undefined') { 
           return (new DOMParser()).parseFromString(str, 'text/xml'); 
          } 

          return createElement('div', null); 
         } 

Answer 1

Ich würde Ihnen empfehlen, eine Variable lastHover zu haben und dann im mouseover Ereignis aufgerufen, wenn Sie den Anruf setIcon getan haben, setzen lastHover auf den laufenden schwebte Marker. Fügen Sie dann auch eine if Anweisung hinzu, um eine Überprüfung wie if lastHover marker is set then unset its hovered icon durchzuführen.

Beispiel:

var infoWindow = new google.maps.InfoWindow(); 
    var lastHovered = null; 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'mouseover', function (markerGroups) { 
       if (lastHovered) { 
        // Set back the original icon 
        ... 
       } 

       // Set current marker with the hover icon 
       ... 

       // Set current as lastHovered - so we can unset it when a mouseover on a new marker occurs 
       lastHovered = marker; 
      } 
     }); 
    }