如何从选定的多边形切换填充颜色？答案

【问题标题】：How toggle fillColor from a selected polygon?如何从选定的多边形切换填充颜色？
【发布时间】：2020-08-26 10:36:21
【问题描述】：

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

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

提前谢谢你。

【问题讨论】：

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

【解决方案1】：

您可以通过将最后一个选定的多边形保持在该状态来跟踪它。如果已经有一个选定的多边形，您可以将该多边形的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。

【讨论】：