@react-google-maps/api 自动完成组件返回未定义的 onPlaceChanged

Question

我在使用 @react-google-maps/api 中的自动完成组件时遇到困难。自动完成本身可以工作并会显示选项。单击选项会填充输入框，但我仅从 Places Api 返回“未定义”。我避免使用像 PlacesAutocomplete 这样的东西，因为我更喜欢 Google 的内置结果渲染。

编辑：App.js 文件应该使用适当的 API 密钥来实现最低限度的功能。

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但您可以在评论中澄清一些内容。而且我也没有找到您在库文档onPlaceChanged上使用和事件的方式。所以我只是根据我在那里所做的事情并删除了你放置的一些东西。onLoad@react-google-maps/api

代码如下所示：

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

  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");
    }
  }

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

onLoad然后我只是更改了和props中的回调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

希望这可以帮助。