Google maps api revert icon style change

Question

地図を作成しています。マウスオーバーしたときにアイコンが移動してスタイルが変わっていて、うまくいきました。問題は、2番目のマーカーが上がったときです。元のスタイルに戻すことはできますが、その方法を見つけることはできません。 ここでは現在動作しているコードを見て、これに直面してみてください。あなたがsetIcon呼び出しを行っているとき、私はmouseoverイベントで、その後lastHoverという変数を持っているために、あなたをお勧めします おかげ

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

は、現在のマーカーを推移するlastHoverを設定します。次にifステートメントを追加してif lastHover marker is set then unset its hovered iconのようなチェックを実行します。

例：

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