React Google Maps在使用StandaloneSearchBox组件时遇到了“加载”状态的问题-PHP中文网问答

我在我的React JS页面上有一个页面，我正在尝试允许公司注册我的网站并添加他们的位置，以便其他公司前来租赁、购买等。如果可以的话，我还需要添加标记。我已经在我的页面上放置了Google地图，但是，我无法将搜索栏（StandaloneSearchBox）放在页面上，因为它一直处于“加载”状态。这是我的代码：

import {useState, useEffect } from 'react'
import { GoogleMap, StandaloneSearchBox, LoadScript } from '@react-google-maps/api';




const initialState = {
  company: '',
  email: '',
  password: '',
  isMember: true,
}

  const Register = () => {

    const mapContainerStyle = {
      height: "400px",
      width: "800px"
    }
    
    const center = {
      lat: -3.745,
      lng: -38.523
    };

  const [values, setValues] = useState(initialState)

  // global state and useNavigate
  const handleChange = (e) => {
    console.log(e.target)
  }

  const onSubmit = (e) => {
    e.preventDefault()
    console.log(e.target)
  }
  const handleLoad = ref => this.searchBox = ref;
  const handlePlacesChanged = () => console.log(this.searchBox.getPlaces());
    return (
        <body class="page-template-default page page-id-13">
        <header class="site-header">
              <div class="container">
              <h1 class="school-logo-text float-left"><a href="/landing"><strong>Direct</strong> Connection</a></h1>
                         <div class="site-header__util">
                                        </div>
                </div>
                </header>

    <div class="page-banner">
     <div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" } }></div>
      <div class="page-banner__content container container--narrow">
        <h1 class="page-banner__title">Register</h1>
        <div class="page-banner__intro">
            <p></p>
        </div>
      </div>
    </div>

<div class="container container--narrow page-section">
  <h2 class="headline headline--tiny">Want to join and connect with companies? Sign up and get your company out there:</h2>
  
    <label class="header">Profile Photo:</label>
      <input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture></input>
    <label class="company-name">Company Name</label>
      <div class="company-input">
        <input text="headline headline--input" placeholder="Enter Company"></input>
      </div>
    <label class="company-email">Email</label>
          <div class="email-input">
          <input text="headline headline--input" placeholder="Enter Email"></input>
          </div>

     <label class="company-map">Map</label>   
<div class="map-input">
    
  <LoadScript
    googleMapsApiKey='API_HERE'>
        <GoogleMap
          id="map"
          mapContainerStyle={mapContainerStyle}
          center={center}
          zoom={10}
        >
          
          <StandaloneSearchBox
          onLoad={handleLoad}
          onPlacesChanged={handlePlacesChanged}
        >
          <input
            type="text"
            placeholder="Customized your placeholder"
            style={{
              boxSizing: `border-box`,
              border: `1px solid transparent`,
              width: `240px`,
              height: `32px`,
              padding: `0 12px`,
              borderRadius: `3px`,
              boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
              fontSize: `14px`,
              outline: `none`,
              textOverflow: `ellipses`,
              position: "absolute",
              left: "50%",
              marginLeft: "-120px"
            }}
          />
        </StandaloneSearchBox>
        </GoogleMap>
      </LoadScript>

            </div>  
    </div>
    

    <footer class="site-footer">
                  <div class="site-footer__inner container container--narrow">
                    <div class="group">
                      <div class="site-footer__col-one">
                        <h1 class="school-logo-text school-logo-text--alt-color">
                          <a href="/landing"><strong>Direct</strong> Connection</a>
                        </h1>
                        <p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
                      </div>
                    </div>
                  </div>
            </footer>

</body>
    )
}


export default Register

我尝试添加更多的导入，比如从../api/docs文件夹中的ScriptLoaded文件，但是这会导致整个页面变空白。如果我从import {} from '@react-google-maps/api'和LoadScript GoogleMap代码中删除StandaloneSearchBox，它就可以在页面上正常显示，只是没有搜索栏和标记来搜索地址（StandaloneSearchBox）

import {useState, useEffect } from 'react' import { GoogleMap, LoadScript, StandaloneSearchBox } from '@react-google-maps/api' const lib = ['places']; const mapContainerStyle = { height: "400px", width: "800px" } const center = { lat: -3.745, lng: -38.523 }; const position = { lat: 37.772, lng: -122.214 } const initialState = { company: '', email: '', password: '', isMember: true, } const Register = () => { const [searchBox, setSearchBox] = useState(null); const handlePlacesChanged = () => console.log(searchBox.getPlaces()); const handleLoad = ref => { setSearchBox(ref); }; const [values, setValues] = useState(initialState) // global state and useNavigate const handleChange = (e) => { console.log(e.target) } const onSubmit = (e) => { e.preventDefault() console.log(e.target) } return ( <body class="page-template-default page page-id-13"> <header class="site-header"> <div class="container"> <h1 class="school-logo-text float-left"><a href="/landing"><strong>Direct</strong> Connection</a></h1> <div class="site-header__util"> </div> </div> </header> <div class="page-banner"> <div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" } }></div> <div class="page-banner__content container container--narrow"> <h1 class="page-banner__title">Register</h1> <div class="page-banner__intro"> <p></p> </div> </div> </div> <div class="container container--narrow page-section"> <h2 class="headline headline--tiny">Want to join and connect with companies? Sign up and get your company out there:</h2> <label class="header">Profile Photo:</label> <input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture></input> <label class="company-name">Company Name</label> <div class="company-input"> <input text="headline headline--input" placeholder="Enter Company"></input> </div> <label class="company-email">Email</label> <div class="email-input"> <input text="headline headline--input" placeholder="Enter Email"></input> </div> <label class="company-map">Map</label> <LoadScript googleMapsApiKey='API_HERE' libraries={lib} > <GoogleMap mapContainerStyle={mapContainerStyle} center={center} zoom={10} > <> <StandaloneSearchBox onLoad={handleLoad} onPlacesChanged={handlePlacesChanged} > <input type="text" placeholder="Search" style={{ boxSizing: `border-box`, border: `1px solid transparent`, width: `240px`, height: `32px`, padding: `0 12px`, borderRadius: `3px`, boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, fontSize: `14px`, outline: `none`, textOverflow: `ellipses`, position: "absolute", left: "50%", marginLeft: "-120px" }} /> </StandaloneSearchBox> </> </GoogleMap> </LoadScript> </div> <footer class="site-footer"> <div class="site-footer__inner container container--narrow"> <div class="group"> <div class="site-footer__col-one"> <h1 class="school-logo-text school-logo-text--alt-color"> <a href="/landing"><strong>Direct</strong> Connection</a> </h1> <p><a class="site-footer__link" href="index.html">706-263-0175</a></p> </div> </div> </div> </footer> </body> ) } export default Register