Google Maps V3 删除事件侦听器不起作用答案

【问题标题】：Google Maps V3 removing event listener not workingGoogle Maps V3 删除事件侦听器不起作用
【发布时间】：2013-06-14 13:03:36
【问题描述】：

我正在从一个数组中绘制多个多边形，然后为每个多边形添加三个事件侦听器； mouseover、mouseout 和 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);
        }

【问题讨论】：

最好把相关的代码贴在这里或者在JSFiddle做个小技巧
也许你可以尝试替换 google.maps.event.removeListener(listentothis);通过 google.maps.event.clearListeners(chartLayer, 'mouseout');
试过 Seb 但没有成功

标签： google-maps google-maps-api-3

【解决方案1】：

您会在每个循环上覆盖 chartLayer 和 listentothis，因此当您单击多边形时，它始终会影响循环内最后创建的多边形（或事件）。

您可以在点击回调中轻松使用this 来访问点击的多边形：

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

（请注意，该方法称为 clearListeners，而不是 removeListeners，正如 Seb P 的评论中提到的）

【讨论】：