📜  React google Places 自动完成示例 - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:03:55.538000             🧑  作者: Mango

代码示例1
import React from 'react';import PlacesAutocomplete, {  geocodeByAddress,  getLatLng,} from 'react-places-autocomplete'; class LocationSearchInput extends React.Component {  constructor(props) {    super(props);    this.state = { address: '' };  }   handleChange = address => {    this.setState({ address });  };   handleSelect = address => {    geocodeByAddress(address)      .then(results => getLatLng(results[0]))      .then(latLng => console.log('Success', latLng))      .catch(error => console.error('Error', error));  };   render() {    return (              {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (          
                                      {loading && 
Loading...
}              {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 (                                      {suggestion.description}                  
                );              })}            
          
        )}          );  }}