如何从选定的多边形切换fillColor？

如何解决如何从选定的多边形切换fillColor？

我正在使用google-maps-react在地图上绘制一些多边形。

我想向用户展示他选择了哪个多边形。问题是当用户在多边形上选择并单击另一个多边形时，似乎有两个选定的多边形，有两个蓝色背景的多边形。

您能告诉我如何在多边形之间进行切换吗？如果用户单击另一个多边形，则第一个多边形将恢复为其原始颜色。

这是我在codesandbox中输入的代码

渲染我的地图：

<Map
  google={props.google}
  style={{ width: "80%",height: "80%",position: "relative" }}
  zoom={14}
  initialCenter={{ lat: -22.25176048208858,lng: -47.70295694770419 }}
  clickableIcons={false}
  className={"map"}
  center={{ lat: -22.25176048208858,lng: -47.70295694770419 }}
>
  {poligons.map((paths) => (
    <polygon
      onMouSEOver={mouSEOver}
      onMouSEOut={mouSEOut}
      paths={paths}
      options={polygonoptions}
      onClick={handleClick}
    />
  ))}
</Map>

处理点击事件：

const handleClick = (props,polygon) => {
  const paths = polygon.getPaths().getArray();
  const coordinates = paths.map((path) => {
    const points = path.getArray();
    return points.map((point) => [point.lng(),point.lat()]);
  });

  polygon.setoptions({
    fillColor: "blue"
  });

  return {
    type: "polygon",coordinates
  };
};

显示图像可以更轻松地查看问题的发生：

谢谢。

解决方法

您可以通过保持其状态来跟踪最后选择的多边形。如果已经存在选定的多边形，则可以将该多边形的fillColor设置为默认颜色#02482b，用于此地图。

const [currentHighlightedPolygon,setCurrentHighlightedPolygon] = useState(
  null,);

// ...

const handleClick = (props,polygon) => {
  const paths = polygon.getPaths().getArray();
  const coordinates = paths.map(path => {
    const points = path.getArray();
    return points.map(point => [point.lng(),point.lat()]);
  });

  polygon.setOptions({
    fillColor: 'blue',});

  if (currentHighlightedPolygon !== null) {
    currentHighlightedPolygon.setOptions({
      fillColor: '#02482b',});
  }

  setCurrentHighlightedPolygon(polygon);

  return {
    type: 'Polygon',coordinates,};
};

// ...

这是您的沙箱的分支：https://codesandbox.io/s/toggle-color-forked-u179j?file=/src/Map.js。