更改多边形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看到它的工作。

上面的代码可以改进，欢迎任何想法。