Google지도 V3에서 이벤트 리스너가 작동하지 않습니다.

Question

배열에서 여러 개의 폴리곤을 그린 다음 각각에 3 개의 이벤트 리스너를 추가합니다. 마우스 오버, 마우스 아웃 및 클릭 모두가 예상대로 작동하고 특정 다각형에만 영향을 미칩니다.

필요한 것은 click 이벤트가 발생했을 때 mouseout 이벤트를 비활성화하여 클릭으로 발생하는 색상 변경이 mouseout에 의해 제거되지 않도록하는 것입니다.

많은 게시물을 여기에서 읽고 다른 곳에서 나는 mouseout 이벤트 리스너에 핸들을 추가하고 google.maps.event.removeListener (listentothis)를 추가하려고했습니다. 클릭 리스너에게 보내지 만 작동하지 않습니다.

나는 또한 google.maps.event.clearListeners (chartLayer, 'mouseout')를 시도했습니다. 하지만 그것은 작동하지 않습니다.

전체 코드는 내 머리를하고있는 같은 지침을 크게 감상 할 수 http://testsite.imray.com/mapsv2.php

에서 볼 수 있습니다 그것은 작동하지 않습니다 이유는 볼 수 없습니다. 내부

 for (var i = 0; i < chartData.length; i++) { 
      chartLayer = new google.maps.Polygon({ 
       series: chartData[i].seriesID, 
       paths: chartData[i].latLngs, 
       map: map, 
       strokeColor: chartData[i].colour1, 
       strokeOpacity: 1, 
       strokeWeight: 1, 
       fillColor: chartData[i].colour2, 
       fillOpacity: 0, 
       activeOutline: chartData[i].colour3, 
       activeInterior: chartData[i].colour4, 
       itemcode: chartData[i].itemcode, 
       itemname: chartData[i].itemname, 
       itemlink: chartData[i].itemlink, 
       itemscle: chartData[i].itemscle, 
       itemedtn: chartData[i].itemedtn 
      }); 
      imrayLayer.push(chartLayer); 

      google.maps.event.addListener(chartLayer, 'mouseover', function() { 
       this.setOptions({ 
        strokeColor: this.activeOutline, 
        fillColor: this.activeInterior, 
        fillOpacity: 0.5 
       }); 
      }); 

      var listentothis = google.maps.event.addListener(chartLayer, 'mouseout', function() { 
       this.setOptions({ 
        strokeColor: this.strokeColor, 
        fillOpacity: 0 
       }); 
      }); 

      google.maps.event.addListener(chartLayer, 'click', function() { 
       google.maps.event.removeListener(listentothis); 
       this.setOptions({ 
        strokeColor: this.activeOutline, 
        fillColor: this.activeInterior, 
        fillOpacity: 0.5 
       }); 
       var text = '<h3>' + this.itemname + '</h3>'; 
       text = text + this.itemscle + this.itemedtn; 
       text = text + '<p class="mbot5"><a href="' + this.itemlink + '" title="View full product details" target="_blank">View product page</a></p>'; 
       text = text + '<form action="" id="addForm" name="addForm"><input type="hidden" id="ItemCode" name="ItemCode" value="' + this.itemcode + '" /><p class="bold">Add to basket <a href="javascript:void(0);" onClick="addtobasket()" title="Add this chart to your basket" /><img src="files/images/buy-arrow.png" style="vertical-align:middle;" /></a></p></form>'; 
       text = text + '<div id="message"></div>'; 
       showInSideDiv(text); 
      }); 

      chartLayer.setMap(map); 
     } 

Answer 1

당신이 다각형을 클릭하면 그래서 항상 마지막 만들어진 다각형 (또는 이벤트)에 영향을 미칠 것이다, 모든 루프에 chartLayer 및 listentothis을 덮어 :

감사

의 요청에 따라

코드 고리.

당신은 쉽게 클릭 다각형에 액세스 할 수 클릭 콜백 내부 this을 사용할 수 있습니다 :

google.maps.event.addListener(chartLayer, 
           'click', 
           function() { 
           google.maps.event.clearListeners(this,'mouseout'); 
           }); 

(셉 P의 코멘트가 언급 한 방법이되지 removeListeners, clearListeners라고합니다)