Question

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

Answer 1

您可以使用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文件的polygonOptions。

Answer 2

这是一个example，它使用Google可视化API更改FusionTable中多边形的样式，以便根据存储在表格中的数据创建原生v3多边形，并为其添加鼠标悬停/输出事件。

Answer 3

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

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

更改FusionTablesLayer选项样式选项

3 个答案: