Javascript 如何一次只更改一个特性（多多边形）的颜色-动态样式化GoogleAPI

我正在使用谷歌API创建地图。我已经将建筑物的多多边形层定义为json文件。我希望能够在多边形上单击，并将其颜色更改为其他颜色。在第二个建筑上单击后，只有第二个建筑应已更改颜色，而先前单击的建筑应返回其原始填充。换句话说，我希望能够通过单击仅选择一个建筑，并将其显示为与其他建筑不同的颜色

到目前为止，我尝试了谷歌地图API示例中的动态样式。 然而，到目前为止，我只能点击并“取消点击”建筑物的颜色。我应该怎么做才能得到描述的结果

var buildings = {
"type": "FeatureCollection",
"name": "buildings_layer",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name_1": "HIQ", "addr_nr": "3", "addr_stree": "Gustave-Naville-Weg", "descriptio": "Pavillon II für Architektur" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ], [ 8.507733029701146, 47.409506514443301, 523.865000000005239 ], [ 8.507593213859357, 47.409553556049616, 523.740999999994528 ], [ 8.507704801729497, 47.409706338427313, 523.919999999998254 ], [ 8.507724154119826, 47.409735716985452, 523.929999999993015 ], [ 8.50791195204587, 47.40999305367589, 524.012000000002445 ], [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ] ] ] ] } },
{ "type": "Feature", "properties": { "name_1": "HPM", "addr_nr": "3", "addr_stree": "Otto-Stern-Weg", "descriptio": "Zellbiologie \/ Biochemie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ], [ 8.510447505495517, 47.409823662930137, 528.347999999998137 ], [ 8.510480687529748, 47.409869229727256, 527.111000000004424 ], [ 8.51058712998627, 47.40983370187864, 527.600000000005821 ], [ 8.510554561494247, 47.409787679671524, 528.210999999995693 ], [ 8.510577538817596, 47.409779820844342, 528.043999999994412 ], [ 8.510591621745974, 47.409798795616886, 528.001999999993131 ], [ 8.510693918897799, 47.409764700333952, 526.967999999993481 ], [ 8.510508470488023, 47.409510179668921, 526.216000000000349 ], [ 8.510519713353803, 47.409506549373837, 526.089999999996508 ], [ 8.510483539536088, 47.409456503833148, 528.327000000004773 ], [ 8.510412296671355, 47.409479000563181, 528.046000000002095 ], [ 8.510176066911402, 47.409155053807922, 528.569000000003143 ], [ 8.510187838375566, 47.409151355679001, 528.611000000004424 ], [ 8.510160709934256, 47.409113567319714, 528.615000000005239 ], [ 8.510067967151468, 47.409143705734991, 528.57499999999709 ], [ 8.510060896837672, 47.40913409265417, 528.596999999994296 ], [ 8.509901329328159, 47.409187148927202, 528.582999999998719 ], [ 8.509935290502499, 47.409235263240461, 528.506999999997788 ], [ 8.509941580155729, 47.409233073132619, 528.509000000005472 ], [ 8.510179229753403, 47.409557973376906, 528.032000000006519 ], [ 8.510105684216887, 47.409582743734717, 528.26600000000326 ], [ 8.510142205150705, 47.409632273456758, 528.107999999992899 ], [ 8.510152339753995, 47.409628878346375, 527.959000000002561 ], [ 8.510341013793047, 47.409882067599845, 526.850999999995111 ], [ 8.51043776296215, 47.409850495390771, 527.961999999999534 ], [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ] ] ] ] } },
]
}

到目前为止，我的代码是：

var  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

map.data.addGeoJson(buildings);

map.data.setStyle(function(feature){
    if (feature.getProperty('isColorful'))
    return({
        fillColor: 'red',
        strokeColor: 'red',
        strokeWeight:2
    });
    else
    return ({
    fillColor: 'grey',
    strokeWeight:2
    });
});

map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});

---

单击建筑时，清除所有其他建筑的

isColorful

属性（或保留对着色建筑的引用并将其设置回原位）

清除所有建筑物：

map.data.addListener('click', function(event) {
  map.data.forEach(function(feature) {
    feature.setProperty('isColorful',false);
  });

  event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});

var coloredBuilding = null;
map.data.addListener('click', function(event) {
  if (coloredBuilding != null) {
    coloredBuilding.setProperty('isColorful', false);
  }
  event.feature.setProperty('isColorful', true);
  coloredBuilding = event.feature;
});

或

保留对“活动”建筑的引用：

map.data.addListener('click', function(event) {
  map.data.forEach(function(feature) {
    feature.setProperty('isColorful',false);
  });

  event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});

var coloredBuilding = null;
map.data.addListener('click', function(event) {
  if (coloredBuilding != null) {
    coloredBuilding.setProperty('isColorful', false);
  }
  event.feature.setProperty('isColorful', true);
  coloredBuilding = event.feature;
});

---

为什么不使用简单的多边形数组？性能目标？我想我可以，但实际上这是我第一次使用javascript和google map API，所以到目前为止这是一个学习过程：）这种方法是我找到的第一种，而且很有效。多边形阵列是一个更简单的解决方案吗？我不这么认为。有什么比下面的四行代码更容易呢？第一行代码正是我想做的，但我不知道“forEach”的功能，我无法访问所有的建筑。现在它工作得很好，非常感谢！