【发布时间】：2019-11-17 06:53:52
【问题描述】：
billing information that it is enabled
我启用了计费，但在使用了很短的时间后，我收到的请求很少：
您已超出此 API 的每日请求配额。如果您没有设置自定义每日请求配额，请确认您的项目有一个有效的结算帐户：http://g.co/dev/maps-no-account有关使用限制和 Google Maps JavaScript API 服务的更多信息，请参阅：https://developers.google.com/maps/documentation/javascript/usage"
[react-places-autocomplete]：从 Google Maps API 获取数据时出错。
请在此处查看文档 (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
状态：OVER_QUERY_LIMIT
有人可以帮忙解决这个问题吗？
我正在使用 React js，我在 public/index.html 中的脚本代码是
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=places"></script>
实际上我正在使用我生成的密钥代替 MY_KEY_HERE，它在 1 小时内工作得非常好，后来它显示此错误
我选择地点的代码是
import React, { Component } from 'react';
import Toper3 from './Toper3';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBInput,MDBCard, MDBCardBody } from 'mdbreact';
import { Fragment } from 'react';
import axios from 'axios';
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
import TimeField from 'react-simple-timefield';
const isObject = val => {
return typeof val === 'object' && val !== null;
};
const classnames = (...args) => {
const classes = [];
args.forEach(arg => {
if (typeof arg === 'string') {
classes.push(arg);
} else if (isObject(arg)) {
Object.keys(arg).forEach(key => {
if (arg[key]) {
classes.push(key);
}
});
} else {
throw new Error(
'`classnames` only accepts string or object as arguments'
);
}
});
return classes.join(' ');
};
class FindaRide extends Component {
constructor(props) {
super(props);
this.state = {
info : [],
source: '',
post_address_obj: {},
errorMessage: '',
latitude: null,
longitude: null,
isGeocoding: false,
d_post_address_obj: {},
d_errorMessage: '',
d_latitude: null,
d_longitude: null,
d_isGeocoding: false,
destination : ''
}
}
handleSourceAddressChange = address => {
// console.log(address);
this.setState({
source: address,
latitude: null,
longitude: null,
errorMessage: ""
});
};
handleDestinationAddressChange = address => {
// console.log(address);
this.setState({
destination: address,
d_latitude: null,
d_longitude: null,
d_errorMessage: ""
});
};
refine(){
alert("refinement");
const result = this.state.info.filter(word => word.source ==this.state.source&&word.destination==this.state.destination);
console.log("filtered "+result.length);
this.props.history.push({pathname : `findlist`, state : {details : this.props.location.state.details,info : this.state.info}});
}
handleSubmit = (event) => {
event.preventDefault();
axios.get('http://127.0.0.1:8000/api2/')
.then(res=>{
this.setState({
info : res.data
});
//console.log(res.data);
this.refine();
})
}
render() {
return (
<div>
<Toper3 >{this.props.location.state.details.firstname} {this.props.location.state.details.lastname}</Toper3>
<br/>
<MDBContainer>
<MDBRow>
<MDBCol md="6" className="mb-4" > {/*style={{ maxWidth: "22rem" }}*/}
<MDBCard color="indigo" text="white" className="text-center" align="center" style={{ maxWidth: "22rem" }}>
<MDBCardBody align = "center" >
FILL IN THE DETAILS TO FIND A RIDE
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
<form onSubmit={this.handleSubmit}>
<MDBRow>
<MDBCol md="6" className="mb-4">
<label> Source </label>
<PlacesAutocomplete
value={this.state.source}
onChange={this.handleSourceAddressChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps }) => {
return (
<div className="Demo__search-bar-container">
<div className="Demo__search-input-container">
<input
{...getInputProps({
placeholder: "Tag the location",
className: "Demo__search-input"
})}
/>
{this.state.source.length > 0 && (
<button
className="Demo__clear-button"
onClick={this.handleCloseClick}
>
x
</button>
)}
</div>
{suggestions.length > 0 && (
<div className="Demo__autocomplete-container">
{suggestions.map(suggestion => {
const className = classnames("Demo__suggestion-item", {
"Demo__suggestion-item--active": suggestion.active
});
return (
/* eslint-disable react/jsx-key */
<div
{...getSuggestionItemProps(suggestion, {
className
})}
>
<strong>
{suggestion.formattedSuggestion.mainText}
</strong>{" "}
<small>
{suggestion.formattedSuggestion.secondaryText}
</small>
</div>
);
/* eslint-enable react/jsx-key */
})}
<div className="Demo__dropdown-footer">
<div>
<img
src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
className="Demo__dropdown-footer-image"
/>
</div>
</div>
</div>
)}
</div>
);
}}
</PlacesAutocomplete>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="SOURCE"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.source}
style={{ maxWidth: "18rem" }}
//icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<label> Destination </label>
<PlacesAutocomplete
value={this.state.destination}
onChange={this.handleDestinationAddressChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps }) => {
return (
<div className="Demo__search-bar-container">
<div className="Demo__search-input-container">
<input
{...getInputProps({
placeholder: "Tag the location",
className: "Demo__search-input"
})}
/>
{this.state.destination.length > 0 && (
<button
className="Demo__clear-button"
onClick={this.handleCloseClick}
>
x
</button>
)}
</div>
{suggestions.length > 0 && (
<div className="Demo__autocomplete-container">
{suggestions.map(suggestion => {
const className = classnames("Demo__suggestion-item", {
"Demo__suggestion-item--active": suggestion.active
});
return (
/* eslint-disable react/jsx-key */
<div
{...getSuggestionItemProps(suggestion, {
className
})}
>
<strong>
{suggestion.formattedSuggestion.mainText}
</strong>{" "}
<small>
{suggestion.formattedSuggestion.secondaryText}
</small>
</div>
);
/* eslint-enable react/jsx-key */
})}
<div className="Demo__dropdown-footer">
<div>
<img
src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
className="Demo__dropdown-footer-image"
/>
</div>
</div>
</div>
)}
</div>
);
}}
</PlacesAutocomplete>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="DESTINATION"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.destination}
style={{ maxWidth: "18rem" }}
//icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<br/>
<br/>
<MDBRow>
<MDBCol md="4" className="mb-4">
<label> DateofJourney </label>
<input type = "date" value = {this.state.date} onChange={this.handledatechange} /> {/*(onChange = {event => this.setState({date:event.target.value})} required*/}
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="anything to say"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.ats} onChange={this.handleatschange}
style={{ maxWidth: "18rem" }}
icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<Fragment>
<MDBBtn gradient="blue" type="submit">Submit</MDBBtn>
</Fragment>
</MDBCol>
</MDBRow>
</form>
</MDBContainer>
</div>
);
}
}
export default FindaRide;
【问题讨论】：
标签： reactjs google-maps google-maps-api-3 google-places-api google-console-developer