如何使用 react-google-maps 使用 react js 編輯現有多邊形

Question

在那之后，我使用繪圖管理器添加多邊形，然后我想編輯該多邊形。 當我使用下面的代碼時，得到 function not found 錯誤和 getPath function 在我使用該錯誤時不起作用。 我想添加一個帶有位置的城市，但在該代碼中它不起作用。 當我使用 getPath function 和可編輯的 function 時出現錯誤。

import { compose, withProps } from "recompose";
import {
  withGoogleMap,
  GoogleMap,
  withScriptjs,
  Polygon,
} from "react-google-maps";
const {
  DrawingManager,
} = require("react-google-maps/lib/components/drawing/DrawingManager");

var polygon = [];
const onAdd = (data) => {
  const path = data.getPath();
  var coordinates = [];
  for (var i = 0; i < path.length; i++) {
    var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
    coordinates.push(pathArray);
  }
  polygon = JSON.stringify(coordinates, null, 6);
};

const onEdit = (data) => {
  var pathArray = [data.latLng.lat(), data.latLng.lng()];
  console.log("edit path", pathArray);
  console.log("poly", polygonPath);
  polygonPath.push(pathArray);
};
const onDragEnd = (data) => {
  const path = data.getPath();
  var coordinates = [];
  for (var i = 0; i < path.length; i++) {
    var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
    coordinates.push(pathArray);
  }
  console.log("polygon", JSON.stringify(coordinates, null, 6));
};
let polygonPath = [];
const MyMapComponent = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=" +
      global.config.googleApiKey +
      "&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `500px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  let addPolygonPath = [];
  if (props.isEdit) {
    polygonPath = props.isEdit.geometry.coordinates[0];

    addPolygonPath = props.isEdit.geometry.coordinates[0].map(
      (coordinateItem) => {
        return { lat: coordinateItem[0], lng: coordinateItem[1] };
      }
    );
  }

  return (
    <GoogleMap defaultZoom={12} center={props.mapCenter}>
      {props.isEdit ? (
        <Polygon
          editable={true}
          draggable={true}
          paths={addPolygonPath}
          options={{
            strokeWeight: 2,
            fillColor: "#000",
            fillOpacity: 0.4,
            zIndex: 1,
          }}
          onMouseUp={onEdit}
          onDragEnd={onDragEnd}
        />
      ) : (
        <DrawingManager
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              drawingModes: ["polygon"],
            },

            polygonOptions: {
              strokeWeight: 2,
              fillColor: "#000",
              fillOpacity: 0.4,
              clickable: true,
              editable: true,
              zIndex: 1,
            },
          }}
          onPolygonComplete={onAdd}
        />
      )}
    </GoogleMap>
  );
});

Answer 1

您可以在Polygon組件上使用onLoad屬性來獲取對多邊形 object 的引用。 然后將該參考保存在您的 state 中。

您現在可以在每次編輯后使用它來更新您的多邊形。

像這樣：

export default function Map () {
  const [polygon, setPolygon] = React.useState(null);
  const [polygonRef, setPolygonRef] = React.useState(null);

  // Util to create a polygon with options
  function createPolygon (path) {
    const polygon = new window.google.maps.Polygon({
      path: path,
      fillColor: "#D43AAC",
      strokeColor: "#EB807E",
      fillOpacity: 0.2,
      strokeWeight: 5,
      editable: true,
      clickable: true,
    });

    return polygon;
  };

  // When first drawing is complete and edit has been made, this function is run
  const onPolygonComplete = (polygon, destroy=false) => {
    setPolygon(createPolygon(polygon.getPath()));

    // Destroys the polygon that has been drawn by the manager.
    if(destroy) {
      polygon.setMap(null);
    }
  };

  // Set the ref
  const onPolygonLoad = (polygon) => setPolygonRef(polygon);

  // Update the polygon
  const onPolygonMouseUp = () => onPolygonComplete(polygonRef);

  const polygonProps = polygon
    ? {
        path: polygon.latLngs.i[0].i,
        editable: polygon.editable,
        clickable: polygon.clickable,
        options: {
          fillOpacity: polygon.fillOpacity,
          strokeWeight: polygon.strokeWeight,
        },
      }
    : null;

  return (
    <GoogleMap>
      {/* Map components */}
      {polygon ? (
        <Polygon
          {...polygonProps}
          onLoad={onPolygonLoad}
          onMouseUp={onPolygonMouseUp}
        />
      ) : (
        <DrawingManager
          drawingMode={"polygon"}
          onPolygonComplete={(polygon) => onPolygonComplete(polygon, true)}
        />
      )}
    </GoogleMap>
  );
};

希望這可以幫助。 :)