如何返回所选多边形的坐标？

问题描述

我正在使用google-maps-react来绘制一个在地图上具有多个多边形的数组。

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

以下是我如何在地图上绘制坐标的图片：

如果要在悬停在每个多边形上时添加一个hover事件，我也想做些其他的事情。就像我在互联网上找到的这段视频一样：https://recordit.co/MciFGBL3b7

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

谢谢。

解决方法

我看到您将 data.coordinates json 简化为 auxCoords。您可以做的是将其推入一个数组，然后使用该数组将这些路径从 auxCoords 映射到 <Polygon/>。我是这样实现的：

1. 将缩减后的 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]);

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

 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>
    );

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

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

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

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

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

请参阅此 working code。 注意：使用您的 API 密钥使代码正常工作。