Как редактировать существующий многоугольник, используя реагировать google-maps, используя реагировать js - PullRequest
Новая
       15

Как редактировать существующий многоугольник, используя реагировать google-maps, используя реагировать js

0 голосов
/ 20 апреля 2020

В этом я добавляю многоугольник, используя менеджер чертежей, после чего хочу редактировать этот многоугольник. Когда я использую приведенный ниже код, функция получения ошибки не найдена, а функция getPath не работает, когда я использую этот метод получения ошибок. Я хочу добавить город с местоположением, но в этом коде он не работает. Когда я использую функцию getPath и редактируемую функцию, она получает ошибки. 

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