如何一次更改一个特征（多多边形）的颜色 - 动态样式 google API

Question

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

到目前为止，我在这里尝试了来自 google map 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'));
});

Answer 1

单击建筑物时，清除所有其他建筑物的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;
});

概念证明小提琴