您的问题看起来像DrawingManager被调用了两次，因此有2个按钮，如您的屏幕截图所示。这是您使用的所有代码吗？我使用this code，我似乎无法复制它。
另一件事，请检查您的谷歌MapJavascript脚本标记是否正确编码，在您的代码中似乎有=3.exp后的API键，我相信它应该是&v=3.exp。
另外，你也可以查看@react-google-maps/API库，因为它是react-google-maps库（可惜没有维护）的完全重写。下面是在这个库中实现DrawingManager的sample code，下面是代码片段：

/*global google*/
import ReactDOM from "react-dom";
import React from "react";

import { GoogleMap, DrawingManager } from "@react-google-maps/api";

const defaultLocation = { lat: 40.756795, lng: -73.954298 };

class Map extends React.Component {
  state = {
    directions: null,
    bounds: null,
    style: null,
    position: null
  };

  onMapLoad = map => {};

  render() {
    return (
      <div>
        <GoogleMap
          center={defaultLocation}
          zoom={5}
          onLoad={map => this.onMapLoad(map)}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        >
          <DrawingManager
            options={{
              drawingControl: true,
              drawingControlOptions: {
                style: window.google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: window.google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [window.google.maps.drawing.OverlayType.POLYGON]
              },
              polygonOptions: {
                fillColor: "#199ee0",
                fillOpacity: 0.2,
                strokeWeight: 2,
                strokeColor: "#113460",
                clickable: true,
                editable: true,
                geodesic: false,
                visible: true,
                zIndex: 1
              }
            }}
          />
        </GoogleMap>
      </div>
    );
  }
}

export default Map;

以下是关于多边形和绘图工具全部内容：

import React from 'react';
import {
  withGoogleMap,
  GoogleMap,
  Marker,
  withScriptjs,
} from 'react-google-maps';
import DrawingManager from 'react-google-maps/lib/components/drawing/DrawingManager';

import { MarkerWithLabel } from 'react-google-maps/lib/components/addons/MarkerWithLabel';
import { Polygon } from 'react-google-maps';
import { compose, withProps } from 'recompose';

function GoogleMapsForDelivertCharges() {
  // getModalStyle is not a pure function, we roll the style only on   the first render
  const [open, setOpen] = React.useState(false);
  const [cordinates, setCordinates] = React.useState([
    [
      {
        lat: 36.95017264518586,
        lng: -98.88559984996449,
      },
      {
        lat: 36.70394136086435,
        lng: -88.07505297496449,
      },
      {
        lat: 31.691080846084553,
        lng: -94.53501391246449,
      },
    ],

    [
      {
        lat: 36.879901722288025,
        lng: -124.06626391246449,
      },
      {
        lat: 37.961800398724435,
        lng: -110.61899828746449,
      },
      {
        lat: 29.53553533552923,
        lng: -107.23520922496449,
      },
      {
        lat: 28.61376794407866,
        lng: -122.30845141246449,
      },
    ],
    [
      {
        lat: 48.65307495113541,
        lng: -112.36842037145917,
      },
      {
        lat: 46.640219756834924,
        lng: -104.72193599645917,
      },
      {
        lat: 43.729651946710675,
        lng: -113.15943599645917,
      },
    ],
  ]);

  const MyMapComponent = compose(
    withProps({
      googleMapURL:
        'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places',
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `400px` }} />,
      mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap
  )((props) => (
    <GoogleMap
      defaultZoom={3}
      defaultCenter={
        new window.google.maps.LatLng(36.95017264518586, -98.88559984996449)
      }
    >
      {/* {props.isMarkerShown && (
                <Marker position={{ lat: 26.9124, lng: 75.7873 }} />
            )} */}
      <MarkerWithLabel
        position={{ lat: 36.95017264518586, lng: -98.88559984996449 }}
        labelAnchor={new window.google.maps.Point(0, 0)}
        labelStyle={{
          backgroundColor: 'yellow',
          fontSize: '20px',
          padding: '8px',
        }}
      >
        <div>YOUR HERE!</div>
      </MarkerWithLabel>

      <DrawingManager
        defaultDrawingMode={window.google.maps.drawing.OverlayType.POLYGON}
        onPolygonComplete={function (polygon) {
          OpenModalBox(polygon);
          // console.log(polygon);
        }}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: window.google.maps.ControlPosition.TOP_CENTER,
            draggable: true,
            drawingModes: [
              window.google.maps.drawing.OverlayType.POLYGON,
              window.google.maps.drawing.OverlayType.RECTANGLE,
              // window.google.maps.drawing.OverlayType.CIRCLE,
              // window.google.maps.drawing.OverlayType.POLYLINE,
            ],
          },
          rectangleOptions: {
            draggable: true,
            editable: true,
            strokeColor: '#00FF00',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#00FF00',
            fillOpacity: 0.35,
            onRightClick: function (event) {
              alert('Right Clicked');
            },
          },
          // circleOptions: {
          //    draggable: true,
          //    editable: true,
          //    strokeColor: "#FF0000",
          //    strokeOpacity: 0.8,
          //    strokeWeight: 2,
          //    fillColor: "#FF0000",
          //    fillOpacity: 0.35,
          //    zIndex: 1,
          // },
          polygonOptions: {
            draggable: true,
            editable: true,
            strokeColor: '#00FF00',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#00FF00',
            fillOpacity: 0.35,
            onRightClick: function (event) {
              alert('Right Clicked');
            },
          },
        }}
      />
      <Polygon
        draggable={true}
        editable={true}
        onClick={function (event) {
          alert('clicked');
        }}
        options={{
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
        }}
        paths={cordinates}
      />
    </GoogleMap>
  ));
  // Google Map End  here
  const OpenModalBox = (polygon) => {
    const coords = polygon
      .getPath()
      .getArray()
      .map((coord) => {
        return {
          lat: coord.lat(),
          lng: coord.lng(),
        };
      });
    console.log('OpenModal', coords);
    // setCordinates([...cordinates, coords]);
    // alert("OpenModal");
  };
  console.log(cordinates);
  return (
    <div>
      <MyMapComponent />
    </div>
  );
}

export default React.memo(GoogleMapsForDelivertCharges);