@react谷歌地图/api自动完成组件返回未定义的onPlaceChanged

Question

我在@react谷歌地图/api中使用自动完成组件时遇到困难。自动完成本身工作，并将显示选项。单击一个选项会填充输入框，但我只从PlacesApi返回"undefined"。我避免使用PlacesAutocomplete之类的东西，因为我更喜欢谷歌的内置结果渲染。

已编辑：使用适当的API键，App.js文件的功能应该最低。

import React, { useState, useRef} from 'react';
import { Autocomplete, useLoadScript } from '@react-google-maps/api';
const placesLibrary = ['places']

function App() {
const [searchResult, setSearchResult] = useState('')
const autocompleteRef = useRef();
const { isLoaded } =  useLoadScript({
googleMapsApiKey: 'GOOGLE_API_KEY',
libraries: placesLibrary
});
const onLoad = () => {
const autocomplete = autocompleteRef.current
}
const onPlaceChanged = (place) => {
setSearchResult(place)
console.log(searchResult)
}
if(!isLoaded) {
return <div>Loading...</div>
};

return (
<div className="App">


<div id="searchColumn">
<h2>Tide Forecast Options</h2>
<Autocomplete
onPlaceChanged={(place) => onPlaceChanged(place)}
onLoad = {onLoad}>
<input
type="text"
placeholder="Search for Tide Information"
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`,
}}
/>
</Autocomplete>
</div>
</div>    
)}
export default App;

Answer 1

我能够重现您的代码，并发现您包含的一些不必要的东西，如useRef、autocompleteRef，但您可以在注释中澄清。此外，我也没有发现您在@react-google-maps/api库文档中使用onPlaceChanged和onLoad事件的方式。所以我只是根据我在那里做的事情，去掉了你放的一些东西。

代码如下：

首先，<Autocomplete />的onLoad()函数已经有一个名为autocomplete的内置参数，该参数通过使用getPlace()返回自动完成的结果。参考此处。所以我在这里所做的是，我在onload()函数中使用setSearchResult(autocomplete)改变了searchResult状态的值，自动完成的结果返回了什么。

function onLoad(autocomplete) {
setSearchResult(autocomplete);
}

然后在onPlaceChanged()函数上，我使用新的searchResult值来获取位置详细信息。

function onPlaceChanged() {
if (searchResult != null) {
//variable to store the result
const place = searchResult.getPlace();
//variable to store the name from place details result 
const name = place.name;
//variable to store the status from place details result
const status = place.business_status;
//variable to store the formatted address from place details result
const formattedAddress = place.formatted_address;
// console.log(place);
//console log all results
console.log(`Name: ${name}`);
console.log(`Business Status: ${status}`);
console.log(`Formatted Address: ${formattedAddress}`);
} else {
alert("Please enter text");
}
}

如果您想检查变量place结果中的内容，可以从console.log(place)中删除注释，如果您想从自动完成结果中获得其他详细信息，可以将其用作引用。

然后，我只是更改了onLoad和onPlaceChanged道具中的回调，以便简单地调用上面的函数。

return (
<div className="App">
<div id="searchColumn">
<h2>Tide Forecast Options</h2>
<Autocomplete onPlaceChanged={onPlaceChanged} onLoad={onLoad}>
<input
type="text"
placeholder="Search for Tide Information"
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`
}}
/>
</Autocomplete>
</div>
</div>
);

有了这个，一切似乎都很顺利。

如果你想尝试一下，这里有一个代码沙盒(只需使用你自己的API密钥(：https://codesandbox.io/s/react-google-maps-api-multiple-markers-infowindow-forked-dpueyy?file=/src/App.js

希望这能有所帮助。