📅  最后修改于: 2022-03-11 15:03:55.538000             🧑  作者: Mango
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} ); })} )} ); }}