Question

我们有一张地图使用多边形在国家/地区之上创建叠加层。当用户在一个国家/地区上空盘旋时，多边形会改变颜色。

当鼠标离开国家时，它会变回（或者至少我们想要它）

我们下面的代码是两个国家都在访问JUST最后一段代码的设置。似乎所有其他代码都被覆盖了。

我不知道哪个变量是唯一的。

for(var i = 0; i < germany.length; i++){
    addListener( germany[ i ], germany );
    }
function addListener( germany_item, tweened )
{   
    google.maps.event.addListener(germany_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
    });
    google.maps.event.addListener(germany_item, "mouseout",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" });
    });
}//
for(var i = 0; i < france.length; i++){
    addListener( france[ i ], france );
    }
function addListener( france_item, tweened )
{   
    google.maps.event.addListener(france_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        });
    google.maps.event.addListener(france_item, "mouseout",function() {    
                    for( var i in tweened ) 
            tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" });
        });

Answer 1

您不能拥有两个具有相同名称的功能（您有两个function addListener()副本）。如果你这样做，那么只有最后一个将是活动的（这是你正在经历的）。我建议您将两个函数的名称更改为addListenerGermany()和addListenerFrance()，或者将它们替换为一个函数，并将两者之间的微小差异作为参数传递，这样您就可以同时满足两个函数的需求代码块。

例如，您可以将其全部更改为：

for (var i = 0; i < germany.length; i++) {
    addListenerCommon( germany[ i ], germany , "#5EA9BD", "#5EA9BD");
}

for(var i = 0; i < france.length; i++) {
    addListenerCommon( france[ i ], france, "#006886", "#006886" );
}

function addListenerCommon(item, tweened, fill, stroke ) {   
    google.maps.event.addListener(item, "mouseover",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        }
    });
    google.maps.event.addListener(item, "mouseout",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: fill, strokeColor: stroke });
        }
    });
}

如果您要添加更多国家/地区，则可以为for循环创建一个函数：

function initCountry(country, fill, stroke) {
    for (var i = 0; i < country.length; i++) {
        addListenerCommon(country[i], country, fill, stroke);
    }
}

initCountry(germany, "#5EA9BD", "#5EA9BD");
initCountry(france, "#006886", "#006886");
initCountry(australia, "#FF6886", "#FF6886");

依旧......

Answer 2

见this related question。使用function myFunction()语法在分析时定义函数，而不是在运行时，因此最后一个声明将覆盖第一个。您可以使用var myFunction = function()语法来解决此问题，该语法在运行时定义：

var addListener = function( germany_item, tweened ) { ... };
addListener(germany);
var addListener = function( france_item, tweened ) { ... };
addListener(france);

我的所有代码都被最后一节覆盖了

2 个答案: