使用反应谷歌地图的全屏选项在谷歌 map 中不起作用

Question

单击全屏按钮，我无法全屏显示我的 map。 它显示像重新加载并返回到相同的最小化 map 且未启用全屏模式。 我无法通过设置 options={defaultMapOptions} where const defaultMapOptions = { fullscreenControl: true, }; 来启用全屏也不是通过设置 defaultOptions={same as above}

//地图组件

     import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } 
    from 'react-google-maps';
   import Geocode from 'react-geocode';
    import Autocomplete from 'react-google-autocomplete';
    Geocode.setApiKey('AIzaSyABCcZiGzeah-a1RiPP-LEpSpukOtROxbs');
   Geocode.enableDebug();

const Map = props => {
const [state, setState] = useState({
address: '',
mapPosition: {
  lat: props.center.lat,
  lng: props.center.lng,
},
markerPosition: {
  lat: props.center.lat,
  lng: props.center.lng,
    },
   });
  const defaultMapOptions = {
  fullscreenControl: true,
 };
  useEffect(() => {
   Geocode.fromLatLng(state.mapPosition.lat, state.mapPosition.lng).then(
     response => {
    const address = response.results[0].formatted_address;
    console.log(address);
    setState(prevState => ({
      ...prevState,
      address: address ? address : '',
    }));
    // setState({ address: address ? address : '' });
  },
  error => {
    console.error(error);
  },
  );
   }, []);

 const onMarkerDragEnd = event => {
  console.log('event', event);
 let newLat = event.latLng.lat(),
  newLng = event.latLng.lng();

  Geocode.fromLatLng(newLat, newLng).then(
  response => {
    console.log('reaspsps', response);
    const address = response.results[0].formatted_address;
    console.log('Address', address);
    setState({
      address: address ? address : '',
      markerPosition: {
        lat: newLat,
        lng: newLng,
      },
      mapPosition: {
        lat: newLat,
        lng: newLng,
      },
    });
  },
  error => {
    console.error(error);
  },
);
};

const onPlaceSelected = place => {
const address = place.formatted_address,
  latValue = place.geometry.location.lat(),
  lngValue = place.geometry.location.lng();
// Set these values in the state.
 setState({
  address: address ? address : '',
  markerPosition: {
    lat: latValue,
    lng: lngValue,
  },
  mapPosition: {
    lat: latValue,
    lng: lngValue,
  },
   });
 };

 const onChange = event => {
  setState({ [event.target.name]: event.target.value });
 };

const onInfoWindowClose = event => {};

const AsyncMap = withScriptjs(
withGoogleMap(props => (
  <GoogleMap
    google={google}
    defaultZoom={14}
    defaultCenter={{ lat: state.mapPosition.lat, lng: state.mapPosition.lng 
}}

    options={defaultMapOptions}
  >
    {/* For Auto complete Search Box */}
    <Autocomplete
      style={{
        width: '100%',
        height: '40px',
        paddingLeft: '16px',
        marginTop: '0px',
        marginBottom: '500px',
      }}
      apiKey={'AIzaSyABCcZiGzeah-a1RiPP-LEpSpukOtROxbs'}
      onPlaceSelected={onPlaceSelected}
      types={['(regions)']}
      placeholder="Search a location"
    />

    {/*Marker*/}
    <Marker
      google={google}
      name={'Dolores park'}
      draggable={true}
      onDragEnd={onMarkerDragEnd}
      position={{ lat: state.markerPosition.lat, lng: 
     state.markerPosition.lng }}
       >
      <InfoWindow
        onClose={onInfoWindowClose}
        position={{ lat: state.markerPosition.lat + 0.0018, lng: 
      state.markerPosition.lng }}
      >
        <div>
          <span style={{ padding: 0, margin: 0 }}>{state.address}</span>
        </div>
      </InfoWindow>
    </Marker>
  </GoogleMap>
   )),
  );

 return (
<div>
  <div>
    <label htmlFor="">Address</label>
    <input
      type="text"
      name="address"
      className="form-control"
      onChange={onChange}
      readOnly="readOnly"
      value={state.address}
    />
  </div>
  <AsyncMap
    googleMapURL="https://maps.googleapis.com/maps/api/js? 
  key=AIzaSyABCcZiGzeah-a1RiPP-LEpSpukOtROxbs&libraries=places"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: props.height }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />
</div>
);
};

//另一个组件

  <div className="border-bottom">Tour Basic Info</div>
  <Form name="add" form={form} layout="vertical" className="auth-contents">
    <Form.Item
      name="tourName"
      label="Tour Name"
      rules={[{ message: 'Please enter the required fill', required: true }]}
    >
      <Input placeholder="Enter Tour Name" />
    </Form.Item>
   </Form>
   <Map height="300px" center={{lat: 18.5204, lng: 73.8567}}/>

    <Button onClick={activateNextTab} style={{marginTop:30}}>Next</Button>
     </div>