即使在启用结算帐户后，我在使用 google 个地图地点 api 时仍然得到 "Status: OVER_QUERY_LIMIT"
Even After Enabling the Billing Account, I am still getting "Status: OVER_QUERY_LIMIT" while using google maps places api
billing information that it is enabled
我已经启用了计费功能，但是在使用了很少的时间并提出了很少的请求之后，我得到了：
You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account For more information on usage limits and the Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/usage"
[react-places-autocomplete]: error happened when fetching data from Google Maps API.
Please check the docs here (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
Status: OVER_QUERY_LIMIT
有人可以帮忙解决这个问题吗？
我正在使用 React js，我在 public/index 中的脚本代码是
<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;
我一直等到下午 1 点 30 分（印度时间），配额得到刷新。现在它工作正常。所以答案是等到 "Pacific mid night time"，然后重新开始和平地工作（请注意，您的结算帐户应该已启用）
查看您提供的 screenshot，您的结算帐户似乎位于印度。
如您所知，Google 地图平台 pay as you go pricing has been launched 于 2019 年 11 月 18 日在印度。在此更改之前，您的项目受到一些免费限制，这可能会导致 OVER_QUERY_LIMIT 超出时出错。
To fix this issue, you will need to create a new billing account
dedicated for Maps APIs only and migrate your maps projects to this
new account.
这是一个 guide 您可以按照它来了解如何为地图创建新的结算帐户。请确保 select 结算帐户将支付的正确业务（在本例中 Google Maps Platform） .
下面也是帮助您学习如何 migrate your projects 的部分。
如果您在这个问题上仍然需要帮助，我建议您 file a support case 在 GCP 控制台上与我们一起打开一个个性化的沟通渠道，因为这个问题似乎与编程无关。
希望对您有所帮助！
billing information that it is enabled
我已经启用了计费功能，但是在使用了很少的时间并提出了很少的请求之后，我得到了：
You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account For more information on usage limits and the Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/usage"
[react-places-autocomplete]: error happened when fetching data from Google Maps API.
Please check the docs here (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
Status: OVER_QUERY_LIMIT
有人可以帮忙解决这个问题吗？
我正在使用 React js，我在 public/index 中的脚本代码是
<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;
我一直等到下午 1 点 30 分（印度时间），配额得到刷新。现在它工作正常。所以答案是等到 "Pacific mid night time"，然后重新开始和平地工作（请注意，您的结算帐户应该已启用）
查看您提供的 screenshot，您的结算帐户似乎位于印度。
如您所知，Google 地图平台 pay as you go pricing has been launched 于 2019 年 11 月 18 日在印度。在此更改之前，您的项目受到一些免费限制，这可能会导致 OVER_QUERY_LIMIT 超出时出错。
To fix this issue, you will need to create a new billing account dedicated for Maps APIs only and migrate your maps projects to this new account.
这是一个 guide 您可以按照它来了解如何为地图创建新的结算帐户。请确保 select 结算帐户将支付的正确业务（在本例中 Google Maps Platform） .
下面也是帮助您学习如何 migrate your projects 的部分。
如果您在这个问题上仍然需要帮助，我建议您 file a support case 在 GCP 控制台上与我们一起打开一个个性化的沟通渠道，因为这个问题似乎与编程无关。
希望对您有所帮助！