0

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

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

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

在此处输入图像描述

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

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

提前致谢。

4

1 回答 1

1

我看到您将data.coordinatesjson 缩减为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]);
  1. 在里面<Map/>，你会看到我把里面附上<Polygon/>了{auxCoords.auxCoords.map((poly, key) => ()}。这是从 auxCoords 映射每个多边形路径数组。在这种情况下，它会单独创建一个<Polygon/>对象，您可以访问每个形状的路径和属性。另外，请注意google-maps-react`]( https://www.npmjs.com/package/google-maps-react#events-2 )的onClick, onMouseover and onMouseout parameters内部。<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>
    );
  1. 然后是我在上述事件中调用的函数。在 onClick 中，我使用道具获取路径。在 onPolyHover 中，当您将鼠标悬停在单个多边形上时，我polygon使用该方法获取路径，getPaths然后用于更改 fillColor。setOptions在 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" });
  };

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

于 2021-03-11T00:49:13.373 回答