在 google-maps-react 上更改选定多边形的颜色
Changing color of selected polygon on google-maps-react
我正在使用 google-maps-react 并尝试更改选中的覆盖多边形的颜色。多边形也是 google-maps-react 的一部分。
多边形接受新的选定状态,setColor 函数甚至 returns 正确的颜色。它只是在地图本身上没有变化。
代码如下:
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}
/>
)
}
这样做...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
您想通过 prop.options 将样式选项传递给 Google 地图 API。
看起来它是由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);
};
更新
另一种选择是访问多边形实例并修改其属性,如下所示。单击多边形对象后,其实例将通过 click
事件的 second 参数传递:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
我正在使用 google-maps-react 并尝试更改选中的覆盖多边形的颜色。多边形也是 google-maps-react 的一部分。
多边形接受新的选定状态,setColor 函数甚至 returns 正确的颜色。它只是在地图本身上没有变化。
代码如下:
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}
/>
)
}
这样做...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
您想通过 prop.options 将样式选项传递给 Google 地图 API。
看起来它是由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);
};
更新
另一种选择是访问多边形实例并修改其属性,如下所示。单击多边形对象后,其实例将通过 click
事件的 second 参数传递:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};