为什么我有 2 个带有 react-google maps DrawingManager 的“绘制多边形”按钮

如何解决为什么我有 2 个带有 react-google maps DrawingManager 的“绘制多边形”按钮

所以我对 React 比较陌生，这是我第一次使用 react-google-maps，我试图创建一个带有地图的页面，用户可以在其中绘制多边形，但我得到以下内容：

[我的地图][1] https://i.stack.imgur.com/VjGP8.png

我似乎无法理解为什么我有两次相同的按钮。 这是我的代码：

import { compose,withProps } from "recompose";
import { withScriptjs,withGoogleMap,GoogleMap } from "react-google-maps";



const center = {
   lat: 48.866667,lng: 2.333333,}

 const {
   DrawingManager
 } = require("react-google-maps/lib/components/drawing/DrawingManager");
 
 const DrawingManagerWrapper = compose(
   withProps({
     googleMapURL: `https://maps.googleapis.com/maps/api/js?key={API_KEY}=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={12}
     defaultCenter={new window.google.maps.LatLng(51.509865,-0.118092)}
   >
     <DrawingManager
       setMap={GoogleMap}
       overlaycomplete={props.onComplete}
       defaultOptions={{
         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>
 ));
 
 export default DrawingManagerWrapper; ```


 [1]: https://i.stack.imgur.com/VjGP8.png

解决方法

您的问题看起来像是 DrawingManager 被调用了两次，因此有 2 个按钮，如您的屏幕截图所示。这是您使用的所有代码吗？我使用了 this code，但似乎无法复制它。

另一件事，请检查您的 Google Maps Javascript 脚本标签是否正确编码，您的代码中的 API 密钥后似乎有 =3.exp，我认为应该是 &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;