1

我正在使用google-maps-react并尝试在选择时更改覆盖多边形的颜色。多边形也是 google-maps-react 的一部分。

多边形接受新的选定状态，setColor 函数甚至返回正确的颜色。它只是在地图本身上没有改变。

代码如下：

setColor = (selected, index) => {
      if (selected) {
          return "blue" //Even when blue is returned, no color change is visible
      } else {
          return "red"
      }
  }



render() {
    return (
        <Polygon
          paths={this.props.paths}
          onClick={() => this.handleClick()}
          strokeColor="#2A2A57"
          strokeOpacity={0.8}
          strokeWeight={2} 
          fillColor = {this.setColor(this.state.isSelected, this.state.index)}
          fillOpacity={0.35}
          {...this.props}
        />
      )
    }
4

2 回答 2

3

看来它是由google-maps-react库设计的，只有更改paths道具会导致Polygon重新渲染。

可以考虑使用以下方法来更新Polygon 属性（例如fillColor）：

1）Google Maps Polygon通过ref属性获取对象的实例：

 <Polygon
          ref={this.polygonRef}
          onClick={this.handleClick}
          paths={triangleCoords}
 />

Polygon.setOptions2）通过函数更新多边形属性：

handleClick = e =>{
   this.setPolygonOptions({fillColor: "green"});
}

在哪里

setPolygonOptions = (options) => {
   this.polygonRef.current.polygon.setOptions(options);
};

演示

更新

另一种选择是访问 Polygon 实例并修改其属性，如下所示。单击多边形对象后，它的实例将通过event的第二个参数传递：click

handleClick = (props,polygon,e) => {
    polygon.setOptions({ fillColor: "#ff00ff"});
};

演示 2

于 2018-11-21T21:54:41.260 回答
1

做这个...

  <Polygon
      paths={this.props.paths}
      onClick={() => this.handleClick()}
      options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
      {...this.props}
    />

您想通过 prop.options 将样式选项传递给 Google Maps API。

于 2018-11-21T15:53:59.447 回答