谷歌地图V3移除事件监听器无法正常工作 [英] Google Maps V3 removing event listener not working
问题描述
我从一个数组中绘制多个多边形，然后向每个多边形添加三个事件侦听器;鼠标悬停，鼠标悬停和点击所有按预期工作，只会影响特定的多边形。
我需要的是在发生点击事件时禁用鼠标移出事件，点击发生的颜色变化不会被鼠标移除。
在这里和其他地方阅读了很多帖子后，我尝试在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，
i temcode：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
}）;
}）;
$ b $ 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 =查看完整的产品详细信息target =_ blank>查看产品页面< / a>< / p>';
text = text +'< form action =id =addFormname =addForm>< input type =hiddenid =ItemCodename =ItemCodevalue ='+ this.itemcode +'/>< p class =bold>添加到购物车< a href =javascript：void（0）;onClick =addtobasket（ ）title =将此图表添加到您的购物篮中/>< img src =files / images / buy-arrow.pngstyle =vertical-align：middle;/>< / a>< ; / p>< /形式>';
text = text +'< div id =message>< / div>';
showInSideDiv（text）;
}）;
chartLayer.setMap（map）;
}
您覆盖 chartLayer 和 listentothis 在每个循环中，所以当你点击一个多边形时，它总是会影响最后创建的多边形（或事件）循环。
您可以轻松地在点击回调中使用 this 访问点击的多边形：
pre $ lt; code> google.maps.event.addListener（chartLayer，
'click'，
function（）{
google.maps.event.clearListeners（this，'mouseout'）;
}）;
（请注意，该方法称为 clearListeners ，而不是 removeListeners ，如Seb P的评论所述）
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);
}
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)
这篇关于谷歌地图V3移除事件监听器无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
