更改 FusionTablesLayerOptions 样式选项答案

【问题标题】：Changing FusionTablesLayerOptions Style Options更改 FusionTablesLayerOptions 样式选项
【发布时间】：2012-06-11 00:49:12
【问题描述】：

如何改变 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 });
    });

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-fusion-tables

【解决方案1】：

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

【讨论】：

【解决方案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 文件的多边形选项。

【讨论】：

【解决方案3】：

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

但是：有一个名为 Fusion Tips 的库，可以为 FusionTablesLayer 启用 mouseover 和 mouseout 事件。检查this good blog post 了解如何使用该库。

【讨论】：