2

如何更改 FusionLayer 对象的样式？

我正在尝试创建一个 onClick 事件，该事件将突出显示被点击的状态。为了做到这一点，我希望对象 strokeOpacity 增加并且 strokeColor 变为红色。

如果对象是多边形，我可以这样做：

var red = "#FF0000"; //red
function LoadStates() {
    var points = [
    new google.maps.LatLng(34.984, -85.605),   
    new google.maps.LatLng(32.864, -85.184) 

    //...etc  
    ];


    var alabama = new google.maps.Polygon({
        paths: points,
        strokeColor: outlineColor,
        strokeOpacity: 0,
        strokeWeight: 2,
        fillColor: invisColor,
        fillOpacity: 0
    });

    //add event listeners to polygon, then add polygon to map
    google.maps.event.addListener(alabama, 'mouseover', function () {
        alabama.setOptions({ strokeColor: red });
        alabama.setOptions({ strokeOpacity: 1 });
    });

   google.maps.event.addListener(alabama, 'mouseout', function () {
        alabama.setOptions({ strokeOpacity: 0 });
    });

    google.maps.event.addListener(alabama, 'click', function () {
        document.getElementById("StateName").innerHTML = "Alabama"; extend();
    });
    alabama.setMap(map);

}

由于对象是一个多边形，我可以简单地使用 .setOptions 来更改 strokeColor 和 Opacity。

如何更改从 kml 文件创建的 FusionLayers 对象的多边形选项？

“亚利桑那州”边界文件。

function LoadAZ() {
    arizona = new google.maps.FusionTablesLayer({
        suppressInfoWindows: false,

        query: {
            select: 'col4',
            from: '210217',
            where: "col3 <= 'B' "
        },

        styles: [{
            polygonOptions: {
                strokeColor: outlineColor,
                strokeOpacity: 0.01,
                strokeWeight: 2,
                fillColor: invisColor,
                fillOpacity: .01
            }

这里的样式选项会改变。如何更改事件的选项？我想做这样的事情：

google.maps.event.addListener(arizona, 'mouseover', function () {
        arizona.setOptions({ strokeOpacity: 1 });
    });
4

3 回答 3

2

您可以使用该setOptions方法直接更改它。

var selectedOptions = {
        styles: [{
            polygonOptions: {
                strokeColor: red,
                strokeOpacity: 1,
                strokeWeight: 2,
                fillColor: invisColor,
                fillOpacity: .01
            }

        }]
    }

google.maps.event.addListener(arizona, 'click', function (clickEvent) {
        document.getElementById("StateName").innerHTML = "Arizona"; extend();
        arizona.setOptions(selectedOptions);
    });

这将直接更改 kml 文件的多边形选项。

于 2012-06-07T17:22:06.187 回答
1

这是一个使用谷歌可视化 API 更改 FusionTable 中多边形样式的示例，以从存储在表中的数据创建原生 v3 多边形并向它们添加鼠标悬停/移出事件。

于 2012-06-28T01:31:30.970 回答
0

目前您无法处理mouseoverFusionTablesLayer，唯一支持的事件是click（如果我错了，请纠正我）。

但是：有一个名为Fusion Tips的库，可以为 FusionTablesLayer启用mouseoverandmouseout事件。查看这篇关于如何使用库的好博文。

于 2012-06-07T15:28:29.403 回答