<p>我在我的React JS页面上有一个页面，我正在尝试允许公司注册我的网站并添加他们的位置，以便其他公司前来租赁、购买等。如果可以的话，我还需要添加标记。我已经在我的页面上放置了Google地图，但是，我无法将搜索栏（<code>StandaloneSearchBox</code>）放在页面上，因为它一直处于“加载”状态。这是我的代码：</p> <pre class="brush:php;toolbar:false;">import {useState, useEffect } from 'react' import { GoogleMap, StandaloneSearchBox, LoadScript } from '@react-google-maps/api'; const initialState = { company: '', email: '', password: '', isMember: true, } const Register = () =&gt; { const mapContainerStyle = { height: &quot;400px&quot;, width: &quot;800px&quot; } const center = { lat: -3.745, lng: -38.523 }; const [values, setValues] = useState(initialState) // global state and useNavigate const handleChange = (e) =&gt; { console.log(e.target) } const onSubmit = (e) =&gt; { e.preventDefault() console.log(e.target) } const handleLoad = ref =&gt; this.searchBox = ref; const handlePlacesChanged = () =&gt; console.log(this.searchBox.getPlaces()); return ( &lt;body class=&quot;page-template-default page page-id-13&quot;&gt; &lt;header class=&quot;site-header&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;h1 class=&quot;school-logo-text float-left&quot;&gt;&lt;a href=&quot;/landing&quot;&gt;&lt;strong&gt;Direct&lt;/strong&gt; Connection&lt;/a&gt;&lt;/h1&gt; &lt;div class=&quot;site-header__util&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;div class=&quot;page-banner&quot;&gt; &lt;div class=&quot;page-banner__bg-image&quot; style={ { backgroundImage: &quot;url('connection.jpg')&quot; } }&gt;&lt;/div&gt; &lt;div class=&quot;page-banner__content container container--narrow&quot;&gt; &lt;h1 class=&quot;page-banner__title&quot;&gt;Register&lt;/h1&gt; &lt;div class=&quot;page-banner__intro&quot;&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;container container--narrow page-section&quot;&gt; &lt;h2 class=&quot;headline headline--tiny&quot;&gt;Want to join and connect with companies? Sign up and get your company out there:&lt;/h2&gt; &lt;label class=&quot;header&quot;&gt;Profile Photo:&lt;/label&gt; &lt;input id=&quot;image&quot; type=&quot;file&quot; name=&quot;profile_photo&quot; placeholder=&quot;Photo&quot; required=&quot;&quot; capture&gt;&lt;/input&gt; &lt;label class=&quot;company-name&quot;&gt;Company Name&lt;/label&gt; &lt;div class=&quot;company-input&quot;&gt; &lt;input text=&quot;headline headline--input&quot; placeholder=&quot;Enter Company&quot;&gt;&lt;/input&gt; &lt;/div&gt; &lt;label class=&quot;company-email&quot;&gt;Email&lt;/label&gt; &lt;div class=&quot;email-input&quot;&gt; &lt;input text=&quot;headline headline--input&quot; placeholder=&quot;Enter Email&quot;&gt;&lt;/input&gt; &lt;/div&gt; &lt;label class=&quot;company-map&quot;&gt;Map&lt;/label&gt; &lt;div class=&quot;map-input&quot;&gt; &lt;LoadScript googleMapsApiKey='API_HERE'&gt; &lt;GoogleMap id=&quot;map&quot; mapContainerStyle={mapContainerStyle} center={center} zoom={10} &gt; &lt;StandaloneSearchBox onLoad={handleLoad} onPlacesChanged={handlePlacesChanged} &gt; &lt;input type=&quot;text&quot; placeholder=&quot;Customized your placeholder&quot; 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: &quot;absolute&quot;, left: &quot;50%&quot;, marginLeft: &quot;-120px&quot; }} /&gt; &lt;/StandaloneSearchBox&gt; &lt;/GoogleMap&gt; &lt;/LoadScript&gt; &lt;/div&gt; &lt;/div&gt; &lt;footer class=&quot;site-footer&quot;&gt; &lt;div class=&quot;site-footer__inner container container--narrow&quot;&gt; &lt;div class=&quot;group&quot;&gt; &lt;div class=&quot;site-footer__col-one&quot;&gt; &lt;h1 class=&quot;school-logo-text school-logo-text--alt-color&quot;&gt; &lt;a href=&quot;/landing&quot;&gt;&lt;strong&gt;Direct&lt;/strong&gt; Connection&lt;/a&gt; &lt;/h1&gt; &lt;p&gt;&lt;a class=&quot;site-footer__link&quot; href=&quot;index.html&quot;&gt;706-263-0175&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/footer&gt; &lt;/body&gt; ) } export default Register</pre> <p>我尝试添加更多的导入，比如从../api/docs文件夹中的<code>ScriptLoaded</code>文件，但是这会导致整个页面变空白。如果我从<code>import {} from '@react-google-maps/api'</code>和<code>LoadScript GoogleMap</code>代码中删除<code>StandaloneSearchBox</code>，它就可以在页面上正常显示，只是没有搜索栏和标记来搜索地址（<code>StandaloneSearchBox</code>）</p>

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