在 google-maps-react 上更改选定多边形的颜色答案

【问题标题】：Changing color of selected polygon on google-maps-react在 google-maps-react 上更改选定多边形的颜色
【发布时间】：2019-04-24 05:35:06
【问题描述】：

我正在使用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}
        />
      )
    }

【问题讨论】：

标签： javascript reactjs google-maps google-maps-react

【解决方案1】：

看来它是由google-maps-react库设计的，只是改变了paths props causes Polygon to re-render。

可以考虑以下方法来更新多边形属性（例如，fillColor）：

1) 通过ref attribute获取Google Maps Polygon对象的实例：

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

2) 通过Polygon.setOptions function更新多边形属性：

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

在哪里

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

Demo

更新

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

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

Demo 2

【讨论】：

感谢您的深入回答 Vadim，这有效，因此我将其标记为已解决。但是，当我有多个多边形时，似乎只有其中一个会改变颜色。是否有一个简单的修复方法来跟踪多个多边形？对不起，如果这是一个愚蠢的问题 - 我是一个完整的反应初学者！
如果您有兴趣，请粘贴代码：pastebin.com/7tX9NWHp
@Matsern，关于多边形的多个实例，确实需要跟踪实例。第二种解决方案（请参阅更新的答案）可能是一个更好的选择

【解决方案2】：

这样做...

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

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

【讨论】：

我已经按照你写的做了，而且它似乎没有改变。多边形得到初始值就好了，但不会改变？这可能是其他地方的问题吗？
好的，如果您希望颜色发生变化，那么您的实际选项对象应该在您想要进行任何状态更改时返回。基本上，有你以前的函数来确定颜色来确定整个对象。我会将整个选项对象保存在状态中，谷歌地图应该重新渲染任何状态更改。