更改融合表图层选项样式选项

Question

如何更改FusionLayer对象的样式？

我正在尝试创建一个 onClick 事件，该事件将突出显示单击的状态。为此，我希望对象描边不透明度增加，描边颜色变为红色。

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

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 来更改笔触颜色和不透明度。

如何更改从 kml 文件创建的融合图层对象的多边形选项？

"亚利桑那州"边界文件。

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 文件的多边形选项。

Answer 2

下面是一个示例，它使用 google 可视化 API 更改 FusionTable 中多边形的样式，以根据存储在表中的数据创建本机 v3 多边形，并向其中添加鼠标悬停/出出事件。

Answer 3

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

但是：有一个名为Fusion Tips的库，它为FusionTablesLayer启用mouseover和mouseout事件。查看这篇关于如何使用库的好博客文章。