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 ファイルの polygonOptions が直接変更されます。

于 2012-06-07T17:22:06.187 に答える
1

これは、Google ビジュアライゼーション API を使用して FusionTable のポリゴンのスタイルを変更し、テーブルに格納されたデータからネイティブ v3 ポリゴンを作成し、それらにマウスオーバー/アウト イベントを追加する例です。

于 2012-06-28T01:31:30.970 に答える
0

現時点mouseoverでは、FusionTablesLayer の を処理できません。サポートされているイベントはclick(間違っていたら訂正してください) だけです。

ただし、 FusionTablesLayer のandイベントを有効にするFusion Tipsというライブラリがあります。ライブラリの使用方法については、この優れたブログ投稿を確認してください。mouseovermouseout

于 2012-06-07T15:28:29.403 に答える