OVER_QUERY_LIMIT React js

时间:2018-08-31 06:32:51

标签: reactjs google-maps google-maps-api-3

从Google提取数据时显示OVER_QUERY_LIMIT。此处我使用react-places-autocomplete npm。当我在仪表板内使用此npm时,它显示如下。我正在使用密钥来获取数据。此错误消息出现在渲染过程中。

代码:-

import React, { Component } from 'react';
import data1 from '../forms/data1'
import data2 from '../forms/data2'
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autocomplete';
import {
    Button,
    Card,
    CardBody,
    CardFooter,
    CardHeader,
    Col,
    Form,
    FormGroup,
    Input,
    Row,
  } from 'reactstrap';

class data extends Component {

  constructor(props) {
    super(props);
    this.state = {
      newAssociate: true,
      newOutlet: true,
      address: '' ,

    };
  }
  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => alert(JSON.stringify(latLng)))
      .catch(error => console.error('Error', error));
  };
  render() {

      return (
        <div className="animated fadeIn">
          <Row>
          <Col xs="12" md="6">
             <data1 />
          </Col>
          <Col xs="12" md="6">
          <Card>
              <CardHeader>
                <strong>Outlet</strong>
              </CardHeader>
              <CardBody>
                <Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
                  <FormGroup row>
                    <Col md="6">
                    <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <Input

              {...getInputProps({
                size: "sm",
                placeholder: 'Search ...',
                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>
                    </Col>
                    <Col md="6">
                    <Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
                        <option value="0">City</option>
                        <option value="1">A</option>
                        <option value="2">B</option>
                        <option value="3">C</option>
                      </Input>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col md="6">
                    <Input type="email" id="email-input" name="email-input" bsSize="sm" placeholder="Email" autoComplete="email"/>
                    </Col>
                    <Col xs="12" md="6">
                    <Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
                        <option value="0">Category</option>
                        <option value="1">Restaurants</option>
                        <option value="2">Bars & Pubs</option>
                        <option value="3">Beauty</option>
                      </Input>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col md="6">
                    <Input id="landline-input" name="landline-input" bsSize="sm" placeholder="Land Line"/>
                    </Col>
                    <Col xs="12" md="6">
                    <Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Mobile"/>
                    </Col>
                  </FormGroup>

                  <FormGroup row>
                    <Col md="6">
                    <Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
                        <option value="0">Location</option>
                        <option value="1">a</option>
                        <option value="2">b</option>
                        <option value="3">c</option>
                      </Input>
                    </Col>
                    <Col xs="12" md="6">
                    <Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Exact Location"/>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col md="6">
                    <FormGroup>
                    <Input type="textarea" name="textarea-input" bsSize="sm" id="textarea-input" rows="6"
                             placeholder="Outlet Address" />
                    </FormGroup>
                    <FormGroup row>
                    <Col md="4">
                    <FormGroup><Button size="sm" color="dark" className="btn-pill">Cordinates</Button></FormGroup>
                    </Col>
                    <Col md="8">
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Latitude" /></FormGroup>
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Longitude" /></FormGroup>
                    </Col>
                    </FormGroup>
                    </Col>
                    <Col md="6">
                    <Card>
                    <CardBody>
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Contact Name" /></FormGroup>
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Phone" /></FormGroup>
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Email" /></FormGroup>
                    <FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Designation" /></FormGroup>
                    </CardBody>
                    </Card>
                    </Col>
                  </FormGroup>
                </Form>
              </CardBody>
              <CardFooter>
              <div className="card-header-actions">
                <Button type="submit" size="sm" color="dark"><i className="fa fa-dot-circle-o"></i> Create</Button>
                </div>
              </CardFooter>
            </Card>

          </Col>
          </Row>
        </div>
      );
  }
}

export default data;

我遇到OVER_QUERY_LIMIT错误

预先感谢

0 个答案:

没有答案