Question

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

到目前为止，我尝试使用Google地图API示例here中的动态样式。然而，到目前为止我所获得的只是能够点击并且“取消”＆＃39;建筑的颜色。我该怎么做才能得到描述结果？

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'));
});

proof of concept fiddle

或

继续引用＆＃34;有效＆＃34;建筑：

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

proof of concept fiddle

如何一次改变一个特征（多面）的颜色 - 动态样式谷歌API

1 个答案: