Reactjs 使用react google maps时，全屏选项在google map中不起作用_Reactjs_Api_React Hooks_Antd_React Google Maps

Reactjs 使用react google maps时，全屏选项在google map中不起作用

reactjs api

Reactjs 使用react google maps时，全屏选项在google map中不起作用,reactjs,api,react-hooks,antd,react-google-maps,Reactjs,Api,React Hooks,Antd,React Google Maps,点击全屏按钮，我无法全屏显示我的地图。它像重新加载一样显示，并返回到相同的最小化地图，但未启用全屏模式。我无法通过设置options={defaultMapOptions}来启用全屏，其中const defaultMapOptions={ 全屏控制：正确， }; 也不是通过设置defaultOptions={同上} //映射组件 import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } from

点击全屏按钮，我无法全屏显示我的地图。它像重新加载一样显示，并返回到相同的最小化地图，但未启用全屏模式。我无法通过设置options={defaultMapOptions}来启用全屏，其中const defaultMapOptions={ 全屏控制：正确， }; 也不是通过设置defaultOptions={同上}

//映射组件

     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>

import{withGoogleMap，GoogleMap，withScriptjs，InfoWindow，Marker}
来自“谷歌地图反应”；
从“react Geocode”导入地理编码；
从“react google Autocomplete”导入自动完成；
地理代码setApiKey（'AIzaSyABCcZiGzeah-a1RiPP-LEpSpukOtROxbs'）；
Geocode.enableDebug（）；
常量映射=道具=>{
常量[状态，设置状态]=使用状态({
地址：''，
地图位置：{
lat:props.center.lat，
液化天然气：props.center.lng，
},
标记位置：{
lat:props.center.lat，
液化天然气：props.center.lng，
},
});
常量defaultMapOptions={
全屏控制：正确，
};
useffect（（）=>{
地理编码.fromLatLng（state.mapPosition.lat，state.mapPosition.lng）。然后(
响应=>{
常量地址=响应。结果[0]。格式化的\u地址；
控制台日志（地址）；
设置状态（prevState=>({
…国家，
地址：地址？地址：“”，
}));
//setState（{地址：地址？地址：''}）；
},
错误=>{
控制台错误（error）；
},
);
}, []);
const onMarkerDragEnd=事件=>{
console.log（'event'，event）；
设newLat=event.latLng.lat（），
newLng=event.latLng.lng（）；
地理编码。fromLatLng（newLat，newLng）。然后(
响应=>{
console.log（'reaspps'，响应）；
常量地址=响应。结果[0]。格式化的\u地址；
console.log（'地址'，地址）；
设定状态({
地址：地址？地址：“”，
标记位置：{
拉特：纽拉特，
液化天然气：新液化天然气，
},
地图位置：{
拉特：纽拉特，
液化天然气：新液化天然气，
},
});
},
错误=>{
控制台错误（error）；
},
);
};
const onPlaceSelected=place=>{
const address=place.formatted\u地址，
latValue=place.geometry.location.lat（），
lngValue=place.geometry.location.lng（）；
//在状态中设置这些值。
设定状态({
地址：地址？地址：“”，
标记位置：{
lat:latValue，
液化天然气：液化天然气价值，
},
地图位置：{
lat:latValue，
液化天然气：液化天然气价值，
},
});
};
const onChange=事件=>{
setState（{[event.target.name]：event.target.value}）；
};
const oninfo windowclose=event=>{}；
常量AsyncMap=withScriptjs(
使用谷歌地图（道具=>(
{/*用于自动完成搜索框*/}
{/*标记*/}
{state.address}
)),
);
返回(
地址
);
};

//另一部分

     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>

旅游基本信息
下一个