如何 return 我选择的多边形的坐标？

Question

我正在使用 google-maps-react 在地图上渲染具有多个多边形的数组。

当我点击一个多边形时，我希望它 return 该选定多边形的所有坐标。你能告诉我怎么做吗？

这是我如何在地图上渲染我的坐标的图片：

如果可能的话，我还想要其他东西，当我将鼠标悬停在每个多边形上时添加一个 hover 事件。和我在网上找到的这个视频一样：https://recordit.co/MciFGBL3b7

这是我放在 codesandbox 的代码：https://codesandbox.io/s/blissful-herschel-25rsl?file=/src/App.js

提前致谢。

Answer 1

我看到你把你的 data.coordinates json 缩减成了 auxCoords。你可以做的是将它推入一个数组，然后使用这个数组将这些路径从 auxCoords 映射到 <Polygon/>。这是我如何实现的：

将减少的 json 数据推送到数组中

import data from "./data.json";
const dataArray = [];

let auxCoords = {
  auxCoords: data.coordinates.reduce(
    (a, [c]) => a.concat([c.map(([lat, lng]) => ({ lat, lng }))]),
    []
  )
};
dataArray.push(auxCoords.auxCoords[0]);

在 <Map/> 中，您会看到我在 {auxCoords.auxCoords.map((poly, key) => ()} 中包含了 <Polygon/>。这是从辅助坐标映射每个多边形路径数组。在这种情况下，它单独创建一个 <Polygon/> 对象，您可以访问每个形状的路径和属性。另外，请注意 <Polygon/>. Luckily, these events are supported by [google-maps-react`](https://www.npmjs.com/package/google-maps-react#events-2).

onClick, onMouseover and onMouseout parameters

 return (
      <div>
        <Map
          className="map"
          google={this.props.google}
          onClick={this.onMapClicked}
          initialCenter={{
            lat: -47.7027099655629,
            lng: -22.26485424139211
          }}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={14}
        >
          {auxCoords.auxCoords.map((poly, key) => (
            <Polygon
              key={key}
              paths={poly}
              strokeColor="#0000FF"
              strokeOpacity={0.8}
              strokeWeight={2}
              fillColor="#0000FF"
              fillOpacity={0.35}
              onClick={this.onPolyClick}
              onMouseover={this.onPolyHover}
              onMouseout={this.onPolyHoverOut}
            />
          ))}
        </Map>
      </div>
    );

那么下面是我在上述事件中调用的函数。在 onClick 中，我使用道具获取路径。在 onPolyHover 中，我使用 getPaths 方法从 polygon 获取路径，然后在将鼠标悬停在单个多边形上时使用 setOptions 更改 fillColor。在onPolyHoverOut，我把fillColor改回原来的fillColor。

onPolyClick = (props,polygon, e) => {
    console.log("onclick:");
    console.log(props.paths);
  };

  onPolyHover = (props, polygon, e) => {
    console.log("onHover:");
    console.log(polygon.getPaths());
    polygon.setOptions({ fillColor: "#ff00ff" });
  };

  onPolyHoverOut = (props, polygon, e) => {
    console.log("onHover:");

    polygon.setOptions({ fillColor: "#0000FF" });
  };

看到这个 working code。 注意：使用您的 API 键使代码生效。

如何 return 我选择的多边形的坐标？

How do I return the coordinates of my selected polygon?

javascript

reactjs

google-maps

google-maps-react