ポリゴンの塗りつぶしを変更 - 選択したポリゴンのみを選択して前の選択をクリアします（Googleマップv3）

Question

ポリゴン、マルチポリゴン、ポリゴンに穴があります。すべて正常に動作します。現在、ピン（マーカー）を配置してから、別のポリゴンを選択したときにマーカーを移動しています。 [編集：何百ものポリゴンがあるので、以下のように手動で再設定すると実用的ではありません]

マーカーをfillColorに置き換えてください。誰かがポリゴンをクリックすると、簡単にfillColorを変更できます。これは問題ではありません。私が抱えている問題は、誰かが別のポリゴンをクリックしたときにfillColorをクリアしようとすることです。

これは、多数のファイルを持つ大規模なプロジェクトです...しかし、関連する部分はここにある：

//building is the polygon 
 
building.addListener('click', function() { 
 

 
    // We've been using markers, can we can easily move them. 
 
    setMarker(map, this.center, true); 
 

 
    // Want to use this instead. This works fine to color the polygon but... 
 
    this.setOptions({ 
 
    fillColor: 'orange' 
 
    }); 
 

 
    // I need some function, likely to be called here that clears any other polygon that has been change to 'orange'. 
 
    // I was looking at map.data.revertStyle(); but this doesn't work at this level. 
 

 
});

ちょうどそれを明確にするために、リセットする方法の例がたくさんあります誰かがそれを再びクリックするとポリゴン。それは簡単です。移動マーカー機能の仕組みと同じように、別のポリゴンがクリックされたときにリセットしたいと思います。

はあなたが

Answer 1

このように私たちは近づいてきました。誰かがより良い解決策を持っている場合は、それを渡すことを自由にしてください。私は別のポリゴンを作成していますが、これはクリックされた最後のポリゴンしか保持しません。他のポリゴンをクリックするとリセットされます。プロは、それが必要に応じてきれいに正確に動作することです。私が好きではない部分は、別のレイヤーを作成していることです。できるだけfillColorを変更するだけでいいですね。

var new_polygon = ''; 
 

 
// Checks for an "active" polygon, clears it if it exists, or sets a new one if it does not. 
 
function active_polygon(center, polygon_latlng) { 
 
    if (new_polygon) { 
 
    new_polygon.setMap(null); 
 
    new_polygon = ''; 
 
    } 
 

 
    new_polygon = new google.maps.Polygon({ 
 
    map: map, 
 
    paths: polygon_latlng, 
 
    fillColor: "#DC4405", 
 
    center: center, 
 
    strokeWeight: 0, 
 
    fillOpacity: 1, 
 
    clickable: true, 
 
    zIndex: 400, 
 
    }); 
 

 
    return new_polygon.setMap(map); 
 
} 
 

 
// this was my original listener above for polygons 
 
// This is located in the polygon loop in a later part of the code. 
 
building.addListener('click', function() { 
 

 
    // Generates the new polygon active later 
 
    active_polygon(this.center, this.getPaths()); 
 

 
});

Answer 2

あなたが作ることができ感謝し、あなたのmapカスタムresetColorイベントに耳を傾け、そしてこのようなあなたのポリゴンのクリック機能でこのイベントをトリガ：

var map; 
function initMap() { 
    //initialize map... 

    // Define the LatLng coordinates for the polygons paths. 

    // Construct the polygon. 

    //add polygons to map 

    //attach the map to our custom -resetColor- event 
    google.maps.event.addListener(map, "resetColor", function(){ 
    resetColor.call(bermudaTriangle, null); //invoke resetColor making sure 'this' is the bermuda triangle 
    resetColor.call(secondTriangle, null); // 'this' is the second triangle 
    resetColor.call(someOtherTriangle, null); // ditto 
    }); 

    bermudaTriangle.addListener("click", selectedColor); //polygon1 
    secondTriangle.addListener("click", selectedColor); //polygon2 
    someOtherTriangle.addListener("click", selectedColor); //polygon3 
} 
google.maps.event.addDomListener(window, "load", initMap); 

function resetColor() { 
    console.log("in trigger function"); 
    this.setOptions({ 
    fillColor: "black" 
    }); 
} 
function selectedColor() { 
    //function executed on polygon click 
    google.maps.event.trigger(map, "resetColor"); //trigger our custom event on the map 
    this.setOptions({ 
    fillColor: "yellow" //make the clicked polygon 'selected' 
    }); 
} 

が働いて、それを見るためにthis penを参照してください。

上記のコードは改善の余地があり、いかなる考えも歓迎されています。