0

我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
  };
};

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

在此处输入图像描述

先感谢您。

4

1 回答 1

0

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

于 2020-09-11T09:50:40.543 回答