Google지도 API 마커 마우스 아웃에 대한 자바 스크립트 호버 효과

Question

Google지도에 대한 좌표 배열이 있습니다. 각 좌표 세트는 자체 마커를 가져옵니다. 사용자가 마커를 가리키면 (마우스 오버) 다른 아이콘으로 바뀝니다 (이 아이콘은 모든 마커에서 동일합니다). 내 문제는 사용자가 마우스를 놓으면 원본 아이콘을 복원하지만 모든 마커에 대해 마지막으로 만든 마커 (marker3.png) 만 가져옵니다.

어쩌면 당신은 생각이 있습니다. 다음은 스크립트입니다.

$(document).ready(function(){ 
          var locations = [ 
          ['Dr. Christian Schrey', 52.499496, 13.316873, 4], 
          ['Dr. Teufel', 52.528664, 13.380232, 5], 
          ['Dr. Sebs Firma', 52.507839, 13.496490, 3], 

          ]; 

          initialize(); 
          var map; 
          function initialize() { 
          var myLatlng = new google.maps.LatLng(52.52427, 13.40629); 
          var myOptions = { 
           zoom: 11, 
           center: myLatlng, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          } 
          map = new google.maps.Map(document.getElementById("Map"), myOptions); 

          var infowindow = new google.maps.InfoWindow(); 

          var marker, i; 
          var y = 0; 

          for (i = 0; i < locations.length; i++) { 
          y++; 
          image = 'http://xxx.de/test6/system/css/images/marker'+y+'.png'; 

          marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
           map: map, 
           icon: image 
          }); 

          google.maps.event.addListener(marker, 'click', (function(marker, i) { 
           return function() { 
           infowindow.setContent(locations[i][0]); 
           infowindow.open(map, marker); 
           } 
          })(marker, i)); 

          google.maps.event.addListener(marker, "mouseover", function(event) { 
          this.setIcon("http://xxx.de/test6/system/css/images/pfote_clean.png"); 
          }); 

          google.maps.event.addListener(marker, "mouseout", function(event) { 
          this.setIcon(image); 
          }); 

          } 

         }; 
        }); 

감사합니다. 고맙습니다.

Answer 1

당신은 마커 옵션 내부의 URL을 저장할 수 있습니다

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: image, 
    src:image//<- 
}); 

는 다음 콜백 이후에 URL을 검색 할 수 있습니다 :

this.setIcon(this.src);