React Peta Google mempunyai masalah dengan keadaan "memuatkan" apabila menggunakan komponen StandaloneSearchBox
P粉138711794
2023-08-29 09:07:27
<p>Saya mempunyai halaman dalam halaman React JS saya yang saya cuba benarkan syarikat mendaftar dengan tapak saya dan menambah lokasi mereka supaya syarikat lain boleh datang menyewa, membeli, dsb. Saya juga perlu menambah markup jika boleh. Saya telah meletakkan Peta Google pada halaman saya, namun, saya tidak boleh meletakkan bar carian (<kod>StandaloneSearchBox</code>) pada halaman kerana ia kekal dalam keadaan "memuatkan". Ini kod saya: </p>
<pre class="brush:php;toolbar:false;">import {useState, useEffect} daripada 'react'
import { GoogleMap, StandaloneSearchBox, LoadScript } daripada '@react-google-maps/api';
const initialState = {
syarikat: '',
e-mel: '',
kata laluan: '',
isAhli: benar,
}
const Daftar = () =>
const mapContainerStyle = {
ketinggian: "400px",
lebar: "800px"
}
pusat const = {
lat: -3.745,
lng: -38.523
};
const [nilai, setValues] = useState(initialState)
// keadaan global dan 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());
kembali (
<kelas badan="template-halaman-halaman lalai-id-13">
<kelas pengepala="pengepala tapak">
<div class="bekas">
<h1 class="teks-logo-sekolah float-left"><a href="/landing"><strong>Sambungan Langsung</a></h1>
<div class="site-header__util">
</div>
</div>
</header>
<kelas div="sepanduk halaman">
<div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')"
<div class="page-banner__bekas bekas kandungan--sempit">
<h1 class="page-banner__title">Daftar</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="bekas bekas--bahagian halaman sempit">
<h2 class="tajuk tajuk--kecil">Ingin menyertai dan berhubung dengan syarikat? Daftar dan dapatkan syarikat anda di luar sana:</h2>
<label class="header">Foto Profil:</label>
<input id="imej" type="fail" name="profile_photo" pemegang tempat="Foto" diperlukan="" tangkap></input>
<kelas label="nama-syarikat">Nama Syarikat</label>
<div class="input syarikat">
<input text="tajuk tajuk--input" pemegang tempat="Masukkan Syarikat"></input>
</div>
<kelas label="e-mel syarikat">E-mel</label>
<div class="e-mel-input">
<input text="tajuk tajuk--input" pemegang tempat="Masukkan E-mel"></input>
</div>
<kelas label="peta syarikat">Peta</label>
<div class="masukan-peta">
<LoadScript
googleMapsApiKey='API_HERE'>
<GoogleMap
id="peta"
mapContainerStyle={mapContainerStyle}
pusat={pusat}
zum={10}
>
<StandaloneSearchBox
onLoad={handleLoad}
onPlacesChanged={handlePlacesChanged}
>
<masukan
type="teks"
pemegang tempat="Menyesuaikan pemegang tempat anda"
gaya={{
saiz kotak: `kotak sempadan`,
sempadan: `1px pepejal lutsinar`,
lebar: `240px`,
ketinggian: `32px`,
pelapik: `0 12px`,
sempadanRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
Saiz fon: `14px`,
garis besar: `tiada`,
textOverflow: `elips`,
kedudukan: "mutlak",
kiri: "50%",
marginKiri: "-120px"
}}
/>
</StandaloneSearchBox>
</GoogleMap>
</LoadScript>
</div>
</div>
<footer class="site-footer">
<div class="site-footer__bekas bekas dalam--sempit">
<div class="kumpulan">
<div class="site-footer__col-one">
<h1 class="teks-logo-sekolah-teks-logo-sekolah--warna-alt">
<a href="/landing"><strong>Sambungan Langsung</strong>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</badan>
)
}
eksport lalai Daftar</pra>
<p>Saya cuba menambah lebih banyak import, seperti daripada fail <code>ScriptLoaded</code> dalam folder ../api/docs, tetapi ini menyebabkan keseluruhan halaman menjadi kosong. Jika saya mengalih keluar <kod>StandaloneSearchBox</code> daripada <kod>import {} daripada '@react-google-maps/api'</code> kod, Ia dipaparkan seperti biasa pada halaman, hanya tanpa bar carian dan penanda untuk mencari alamat (<kod>StandaloneSearchBox</code>)</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa masalahnya ialah tiada perpustakaan. Untuk memaparkan kotak carian, perpustakaan diperlukan.
const lib = ['places'];将places设置为一个库，该库必须添加到LoadScriptKod, yang mengandungi kunci API anda. Kod yang dikemas kini sepatutnya telah membetulkan isu: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