React Google Maps hat Probleme mit dem „Ladestatus', wenn die StandaloneSearchBox-Komponente verwendet wird-Fragen und Antworten zum chinesischen PHP-Netzwerk

<p>Ich habe eine Seite auf meiner React JS-Seite, auf der ich Unternehmen die Möglichkeit geben möchte, sich auf meiner Website zu registrieren und ihren Standort hinzuzufügen, damit andere Unternehmen mieten, kaufen usw. kommen können. Wenn möglich, muss ich auch Markup hinzufügen. Ich habe eine Google Map auf meiner Seite eingefügt, kann die Suchleiste (<code>StandaloneSearchBox</code>) jedoch nicht auf der Seite platzieren, da sie im Status „Laden“ bleibt. Das ist mein Code: </p> <pre class="brush:php;toolbar:false;">import {useState, useEffect} aus 'react' import { GoogleMap, StandaloneSearchBox, LoadScript } from '@react-google-maps/api'; const initialState = { Unternehmen: '', Email: '', Passwort: '', isMember: wahr, } const Register = () => const mapContainerStyle = { Höhe: "400px", Breite: "800px" } const center = { Breitengrad: -3,745, Länge: -38,523 }; const [values, setValues] = useState(initialState) // globaler Status und 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()); zurückkehren ( <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> <div class="site-header__util"> </div> </div> </header> <div class="page-banner"> <div class="page-banner__bg-image" { { backgroundImage: "url('connection.jpg')" <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">Möchten Sie Unternehmen beitreten und mit ihnen in Kontakt treten? Melden Sie sich an und machen Sie Ihr Unternehmen bekannt:</h2> <label class="header">Profilfoto:</label> <input id="image" type="Datei" name="profile_photo" placeholder="Foto" erforderlich="" Capture></input> <label class="company-name">Firmenname</label> <div class="company-input"> <input text="headline headline--input" placeholder="Firma eingeben"></input> </div> <label class="company-email">Email</label> <div class="email-input"> <input text="headline headline--input" placeholder="E-Mail-Adresse eingeben"></input> </div> <label class="company-map">Map</label> <div class="map-input"> <LoadScript googleMapsApiKey='API_HERE'> <GoogleMap id="Karte" mapContainerStyle={mapContainerStyle} center={center} zoom={10} > <StandaloneSearchBox onLoad={handleLoad} onPlacesChanged={handlePlacesChanged} > <Eingabe type="text" placeholder="Ihren Platzhalter angepasst" Stil={{ boxSizing: `border-box`, Rand: `1px solide transparent`, Breite: `240px`, Höhe: `32px`, Polsterung: `0 12px`, borderRadius: `3px`, boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, Schriftgröße: `14px`, Gliederung: „keine“, textOverflow: `Ellipsen`, Position: "absolut", links: „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>Direkte</strong> </h1> <p><a class="site-footer__link" href="index.html">706-263-0175</a></p> </div> </div> </div> </footer> </body> ) } Standard exportieren Register</pre> <p>Ich habe versucht, weitere Importe hinzuzufügen, beispielsweise aus der Datei <code>ScriptLoaded</code> im Ordner ../api/docs, aber dadurch wurde die gesamte Seite leer. Wenn ich die <code>StandaloneSearchBox</code> aus dem <code>import {} aus '@react-google-maps/api'</code> entferne Code, wird normal auf der Seite angezeigt, nur ohne Suchleiste und Markup zum Suchen nach Adressen (<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