更改多边形填充颜色 - 仅选定的多边形并清除以前的选择（谷歌地图 v3）

Question

我有多边形、多多边形和带有孔的多边形。他们都工作正常。我们目前正在放置一个图钉（标记），然后当有人选择不同的多边形时移动标记。 [编辑：有数百个多边形，所以像下面的答案那样手动重新设置它们是不切实际的]

我们想要的是用填充颜色替换标记。当有人单击多边形时，我可以轻松更改 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

您可以让您的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 以查看它的工作原理。

以上代码可供改进，欢迎提出任何想法。

Answer 2

这就是我们最终解决这个问题的方式。如果有人有更好的解决方案，请随时传递。不过，这可能对某些人有所帮助... 我正在创建一个单独的多边形，它将只保存最后一个单击的多边形。它会在单击任何其他多边形时重置。优点是它可以根据需要很好地工作。我不喜欢的部分是我正在创建一个单独的图层，如果可能的话，更改填充颜色会很好。

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());

});