更改多邊形fillColor - 只有選定的多邊形和清除以前的選擇（谷歌地圖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看到它的工作。

上面的代碼可以改進，歡迎任何想法。