错误缺少参数。您必须指定位置。 （如何为 nearbySearch 添加监听器）

Question

我正在尝试保存附近地点的列表，但通过调试我发现在分配所选位置之前调用了地点服务。我试图查找有关 addListener 的文档，但我很迷茫，因为一切都与地图的使用有关。但是，我只想要位置。有没有人以前遇到过这个问题？任何帮助，将不胜感激。 这是我尝试获取 NearbyPlaces

的代码片段

  handleSelect = address => {
    geocodeByAddress(address)
    .then(results => getLatLng(results[0]))
    .then(latLng =>   this.state.coordsPair.push(latLng));

    geocodeByAddress(address)
    .then(results => this.state.id.push(results[0].place_id));

    console.log(this.state.id)
    console.log(this.state.coordsPair)
    const {coordsPair} = this.state;
    const {id}= this.state;
    
    let map = new google.maps.Map(document.createElement('div'));
    this.googlePlaces = new google.maps.places.PlacesService(map);

    var request = {
      location: coordsPair[0],
      radius: '500',
      type: ['restaurant']
    };

    
    this.googlePlaces.getDetails(request, callback);

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          console.log(results[i]);
        }
      }
  }
 
}

该代码适用于硬编码值，但是当我尝试将选定值分配给直接进入回调部分并给出错误时

places_impl.js:72 Uncaught (in promise) Error: Missing parameter. You must specify the location.
    at m$._.t.nearbySearch (places_impl.js:72)

这里是完整的代码供进一步参考

import PlacesAutocomplete, {
    geocodeByAddress,
    getLatLng} from 'react-places-autocomplete';

    const google = window.google = window.google ? window.google : {}
class Landing extends Component {
  constructor(props) {
    super(props);
    this.state = { address: '' ,coordsPair: [],formatted_address:[], id: []};
    this.handleSelect = this.handleSelect.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange = address => {
    this.setState({ address });

    
    geocodeByAddress(address)
    .then(results => console.log(results[0]));
  };
 
  handleSelect = address => {
    geocodeByAddress(address)
    .then(results => getLatLng(results[0]))
    .then(latLng =>   this.state.coordsPair.push(latLng));

    geocodeByAddress(address)
    .then(results => this.state.id.push(results[0].place_id));

    console.log(this.state.id)
    console.log(this.state.coordsPair)
    const {coordsPair} = this.state;
    const {id}= this.state;
    
    let map = new google.maps.Map(document.createElement('div'));
    this.googlePlaces = new google.maps.places.PlacesService(map);

    var request = {
      location: coordsPair[0],
      radius: '500',
      type: ['restaurant']
    };

    
    this.googlePlaces.getDetails(request, callback);

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          console.log(results[i]);
        }
      }
  }
 
}


  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                  : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style,
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    );
  }
}

Answer 1

您没有等到前两个方法完成后才调用第三个。如果你使用 then() catch()，你应该将你的逻辑放在 then() 回调中来定义它。否则你可以使用 await

改为：

   handleSelect = async address => {
      let results = await  geocodeByAddress(address)
      let latLng = await getLatLng(results[0]);
      this.state.coordsPair.push(latLng);

      let codeResults = await geocodeByAddress(address)
      this.state.id.push(codeResults[0].place_id)

      console.log(this.state.id)
      console.log(this.state.coordsPair)
      const {coordsPair} = this.state;
      const {id}= this.state;
    
      let map = new google.maps.Map(document.createElement('div'));
      this.googlePlaces = new google.maps.places.PlacesService(map);

      var request = {
      location: coordsPair[0],
      radius: '500',
      type: ['restaurant']
    };