Question

目前，我有一张地图，其中包含多个由多边形定义的区域，每个多边形都有不同的fillColor。

然后，当我将鼠标悬停在每个多边形区域上时，我有以下效果：

google.maps.event.addListener(MapArea, "mouseover", function () {
    this.setOptions({ fillColor: 'rgb(0,255,255)' }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: 'rgb(255,0,0)' }); 
});

换句话说，当我鼠标悬停时，该区域变为青色，当我移除鼠标时，该区域变为红色。但是，由于我的区域都是不同的颜色，我想在移除鼠标时返回它们的颜色。

通过以下方式实现不同的颜色：

for (var t=0; t< lAll_Areas.length; t++) {
    var n = //arbitrary number 0<n<255;
    var m = (255-cd).toString();
    var col = 'rgb(' + n + ',' + m + ',0)';
    lAll_Areas[t].setOptions({ fillColor: col });
}

所以，在那里我希望有类似的东西：

google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: col }); 
});

如何将mouseout事件附加到每个单独的多边形？

Answer 1

一个选项：将默认颜色和高亮颜色设置为多边形的属性。

for (var t=0; t< lAll_Areas.length; t++) {
    var n = //arbitrary number 0<n<255;
    var m = (255-cd).toString();
    var col = 'rgb(' + n + ',' + m + ',0)';
    lAll_Areas[t].defaultColor = col;
    lAll_Areas[t].highlightColor = 'rgb(0,255,255)';
    lAll_Areas[t].setOptions({ fillColor: col });
}

然后：

google.maps.event.addListener(MapArea, "mouseover", function () {
    this.setOptions({ fillColor: this.highlightColor }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: this.defaultColor }); 
});

Answer 2

让mouseover事件侦听器将当前颜色存储在mouseout侦听器可以引用的全局变量中。

var color;

google.maps.event.addListener(MapArea, "mouseover", function () {
    color = this.fillColor;
    this.setOptions({ fillColor: 'rgb(0,255,255)' }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: color }); 
});

许多谷歌地图听众同时存在

2 个答案: