问题
I am plotting a number of polygons from an array and then adding three event listeners to each one; mouseover, mouseout and click all of which are working as expected and only effecting the specific polygon.
What I need is to disable the mouseout event when a click event occurs so that the colour change which occurs with the click is not removed by the mouseout.
Having read lots of posts here and in other places I have tried adding a handle to the mouseout event listener and then adding google.maps.event.removeListener(listentothis); to the click listener but it doesn't work.
I have also tried google.maps.event.clearListeners(chartLayer, 'mouseout'); but that isn;t working either.
Full code can be seen at http://testsite.imray.com/mapsv2.php
Any guidance would be greatly appreciated as it is doing my head in and I can't see why it won't work.
Thanks
Code as requested:
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);
}
回答1:
you overwrite chartLayer
and listentothis
on every loop, so when you click on a polygon it will always affect the last created polygon(or event) inside the loop.
You may easily use this
inside the click-callback to access the clicked polygon:
google.maps.event.addListener(chartLayer,
'click',
function() {
google.maps.event.clearListeners(this,'mouseout');
});
(Note that the method is called clearListeners
, not removeListeners
, as mentioned by Seb P's comment)
来源:https://stackoverflow.com/questions/17109144/google-maps-v3-removing-event-listener-not-working