谷歌地图层点击更改样式多边形

Question

我正在使用geojson数据处理Google地图中的图层。

我现在有一个有四个不同多边形的图层，当你点击它们时，它们会从灰色变成绿色。但是当我再次点击时，它不会变回灰色，这就是点击功能的目的。

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

在我的情况下，它适用于我的编辑器，https://embed.plnkr.co/hi4MtjO8f0PN6rCW70rE/。这是完整的代码段。

我修好了！！我更改了几行的位置，并将其设置为false或true

map.data.setStyle(function(feature) {
var color;
if (feature.getProperty('isColorful')) {
  feature.setProperty('isColorful', false);
  color = '#009900';
}else{
  color: 'grey';
}
return /** @type {google.maps.Data.StyleOptions} */({
  fillColor: color,
  strokeColor: color,
  strokeWeight: 2
});
});

map.data.addListener('click', function(event) {
var name = event.feature.getProperty('name'); 
var index = vm.areas.indexOf(name);
  if(index >= 0){
    vm.areas.splice(index,1);
    event.feature.setProperty('isColorful', false);
  } else{
    vm.areas.push(name);
    event.feature.setProperty('isColorful', true);
  }
  $scope.$apply();
});

Answer 1

你也应该改变你的其他子句中的isColful属性，否则你总是错误的

map.data.setStyle(function(feature) {
var color;

    if (feature.getProperty('isColorful')) {
      feature.setProperty('isColorful', false);
      color = '#009900';
    }else{
      feature.setProperty('isColorful', true);
      color: 'grey';
    }