React Google マップで StandaloneSearchBox コンポーネントを使用すると「読み込み中」状態に問題がある
<p>私の React JS ページに、企業が私のサイトに登録して所在地を追加できるようにするページがあり、他の企業がレンタルや購入などを行えるようにしようとしています。可能であればマークアップも追加する必要があります。ページに Google マップを配置しましたが、「読み込み中」状態のままで、検索バー (<code>StandaloneSearchBox</code>) をページに配置できません。これは私のコードです: </p>
<pre class="brush:php;toolbar:false;">import {useState, useEffect} from 'react'
import { GoogleMap, StandaloneSearchBox, LoadScript } から '@react-google-maps/api';
const 初期状態 = {
会社： ''、
Eメール： ''、
パスワード: ''、
メンバー: true、
}
const レジスタ = () => {
const mapContainerStyle = {
高さ: "400px"、
幅: "800px"
}
const センター = {
緯度: -3.745、
長さ: -38.523
};
const [値, setValues] = useState(initialState)
// グローバル状態と 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());
戻る （
<body class="page-template-default page page-id-13""
<header class="サイトヘッダー">
<h1 class="school-logo-text float-left"<a href="/landing"><strong>直接</strong>接続</a></h1>
<div class="site-header__util">
</div>
</div>
</ヘッダー>
<div class="ページバナー">
<div class="page-banner__bg-image" style={ {backgroundImage: "url('connection.jpg')" } }></div>
<div class="page-banner__content コンテナ コンテナ --narrow""
<h1 class="page-banner__title">登録</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="コンテナ コンテナ -- 狭いページセクション">
<h2 class="headlineHeading--tiny">参加して企業とつながりたいですか?サインアップしてあなたの会社を世に広めましょう:</h2>
<label class="header">プロフィール写真:</label>
<入力ID=「画像」タイプ=「ファイル」名前="プロフィール_写真" placeholder="写真"必須=""キャプチャ>
<label class="会社名">会社名</label>
<div class="会社入力">
<input text="見出し見出し --input" placeholder="会社名を入力"></input>
</div>
<label class="会社メール">メール</label>
<div class="メール入力">
<input text="見出し見出し --input" placeholder="メールアドレスを入力"></input>
</div>
<label class="会社地図">地図</label>
<div class="マップ入力">
<ロードスクリプト
googleMapsApiKey='API_HERE'>
<スタンドアロン検索ボックス
onLoad={ハンドルロード}
onPlacesChanged={ハンドルPlacesChanged}
>
<入力
type="テキスト"
placeholder="プレースホルダーをカスタマイズしました"
スタイル={{
boxSizing: `border-box`、
ボーダー: `1px ソリッド透明`、
幅: `240px`、
高さ: `32px`、
パディング: `0 12px`、
境界半径: `3px`、
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
フォントサイズ: `14px`、
アウトライン: 'なし'、
textOverflow: `省略記号`、
位置: 「絶対」、
左: 「50%」、
marginLeft: "-120px"
}}
/>
</スタンドアロン検索ボックス>
</GoogleMap>
</LoadScript>
</div>
</div>
<フッタークラス="サイトフッター">
<div class="site-footer__innerコンテナcontainer--narrow""
<div クラス = "グループ" >
<div class="site-footer__col-one">
<h1 class="学校のロゴのテキスト 学校のロゴのテキスト--alt-color">
<a href="/landing"<strong>直接</strong>接続</a>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</フッター>
</ボディ>
）
}
デフォルトをエクスポート Register</pre>
<p>../api/docs フォルダー内の <code>ScriptLoaded</code> ファイルなどからインポートを追加しようとしましたが、ページ全体が空白になってしまいました。 <code>StandaloneSearchBox</code> を <code>import {} from '@react-google-maps/api'</code> と <code>LoadScript GoogleMap</code> から削除すると、コードは、アドレスを検索するための検索バーとマークアップ (<code>StandaloneSearchBox</code>)</p> を除いて、通常どおりページに表示されます。
全員に返信(1)返信します
P粉8100506692023-08-30 00:16:09
問題は図書館がないことだと思います。検索ボックスを表示するにはライブラリが必要です。 const lib = ['places']; Place を、API キーを含む LoadScript コードに追加する必要があるライブラリに設定します。更新されたコードでは問題が修正されているはずです:
リーリー
返事
0
