React Google Maps a des problèmes avec l'état de « chargement » lors de l'utilisation du composant StandaloneSearchBox-Questions et réponses sur le réseau chinois PHP

<p>J'ai une page dans ma page React JS sur laquelle j'essaie de permettre aux entreprises de s'inscrire sur mon site et d'ajouter leur emplacement afin que d'autres entreprises puissent venir louer, acheter, etc. Je dois également ajouter un balisage si possible. J'ai mis une carte Google Map sur ma page, cependant, je ne peux pas mettre la barre de recherche (<code>StandaloneSearchBox</code>) sur la page car elle reste en état de "chargement". Voici mon code : </p> <pre class="brush:php;toolbar:false;">importer {useState, useEffect} depuis 'react' importer { GoogleMap, StandaloneSearchBox, LoadScript } depuis '@react-google-maps/api' ; const état initial = { entreprise: '', e-mail: '', mot de passe: '', isMember : vrai, } const Registre = () => const mapContainerStyle = { hauteur : "400px", largeur : "800px" } centre const = { latitude : -3.745, GNL : -38,523 } ; const [valeurs, setValues] = useState (initialState) // état global et 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()); retour ( <body class="page-template-page par défaut page-id-13"> <header class="site-header"> <div class="conteneur"> <h1 class="school-logo-text float-left"><a href="/landing"><strong>Direct</strong>Connexion</a></h1> <div class="site-header__util"> </div> </div> </en-tête> <div class="page-banner"> <div class="page-banner__bg-image" style={ { backgroundImage : "url('connection.jpg')" } }></div> <div class="page-banner__content conteneur conteneur--narrow"> <h1 class="page-banner__title">S'inscrire</h1> <div class="page-banner__intro"> <p></p> </div> </div> </div> <div class="conteneur conteneur--section de page étroite"> <h2 class="headline headline--tiny">Vous souhaitez rejoindre et vous connecter avec des entreprises ? Inscrivez-vous et faites connaître votre entreprise :</h2> <label class="header">Photo de profil :</label> <ID d'entrée="image" type="fichier" name="profile_photo" placeholder="Photo" requis="" capture></entrée> <label class="nom-de-l'entreprise">Nom de l'entreprise</label> <div class="company-input"> <input text="titre titre--entrée" placeholder="Entrer la société"></input> </div> <label class="company-email">E-mail</label> <div class="email-input"> <input text="titre titre--entrée" placeholder="Entrer l'e-mail"></input> </div> <label class="company-map">Carte</label> <div class="map-input"> <LoadScript googleMapsApiKey='API_HERE'> <GoogleMap id="carte" mapContainerStyle={mapContainerStyle} centre={centre} zoom={10} > <Boîte de recherche autonome onLoad={handleLoad} onPlacesChanged={handlePlacesChanged} > <entrée type="texte" placeholder="Personnalisez votre espace réservé" style={{ boxSizing : `border-box`, bordure : `1px solide transparent`, largeur : `240px`, hauteur : `32px`, remplissage : `0 12px`, borderRadius : `3px`, boxShadow : `0 2px 6px rgba(0, 0, 0, 0.3)`, Taille de la police : `14px`, contour : « aucun », textOverflow : `ellipses`, position : "absolue", à gauche : "50%", marginLeft : "-120px" }} /> </StandaloneSearchBox> </GoogleMap> </LoadScript> </div> </div> <footer class="site-footer"> <div class="site-footer__conteneur intérieur conteneur--narrow"> <div class="groupe"> <div class="site-footer__col-one"> <h1 class="texte du logo de l'école texte du logo de l'école--alt-color"> <a href="/atterrissage"><strong>Connexion directe</strong> </h1> <p><a class="site-footer__link" href="index.html">706-263-0175</a></p> </div> </div> </div> </pied de page> </corps> ) } exporter le registre par défaut</pre> <p>J'ai essayé d'ajouter davantage d'importations, par exemple à partir du fichier <code>ScriptLoaded</code> dans le dossier ../api/docs, mais cela a rendu la page entière vide. Si je supprime le <code>StandaloneSearchBox</code> du <code>import {} de '@react-google-maps/api'</code> code, il s'affiche normalement sur la page, juste sans la barre de recherche ni le balisage pour rechercher des adresses (<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

répondre à tous(1)

P粉8100506692023-08-30 00:16:09 1 plancher

Je pense que le problème est qu'il n'y a pas de bibliothèque. Afin d'afficher le champ de recherche, une bibliothèque est nécessaire. const lib = ['places'];将places设置为一个库，该库必须添加到LoadScript Code, qui contient votre clé API. Le code mis à jour aurait dû résoudre le problème :

Comme +0

Ajouter une réponse