Question

googlemapapi我在获取谷歌地图时遇到问题，它说页面无法正确加载，我的控制台也出现了一些错误。我不明白自己在做什么错，我应该可以查询并在建议中显示位置，但是我做错了。这是我的组件，我还附了一张照片。欢迎所有帮助[

import React, { Component } from "react";
import { Map, Marker, GoogleApiWrapper } from "google-maps-react";

const apiKey = process.env.REACT_APP_GOOGLE_API_KEY;



const center = {
  lat: 51.5074,
  lng: 0.1278,
};

let service = null;

export class MapContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input: "",
      suggestions: [],
      places: [],
    };
  }

  savePlace = (place) => {
    this.setState({ places: [...this.state.places, place] });
  };

  handleChange = (e) => {
    this.setState({ input: e.target.value });
  };

  handleKeyPress = (event) => {
    if (event.key === "Enter") {
      this.search();
    }
  };

  

  search = () => {
  const {input} = this.state;
   service.textSearch({query: input}, (suggestions) => {
     this.setState({suggestions});
   })
   
  };

  initPlaces(mapProps, map) {
    const { google } = mapProps;
    service = new google.maps.places.PlacesService(map);
  }

  render() {

    const { suggestions, places } = this.state;

  

    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="form-inline d-flex justify-content-between mb-4">
              <input
                type="text"
                value={this.state.input}
                onChange={this.handleChange}
                className="form-control flex-grow-1"
                placeholder="Search for places on Google Maps"
                onKeyPress={this.handleKeyPress}
              />
              <button onClick={this.search} className="btn btn-primary ml-2">
                Search
              </button>
            </div>
            <h3>Suggestions</h3>
            <ul className="list-group">
              {suggestions.map((place, i) => (
                <li
                  key={i}
                  className="list-group-item d-flex justify-content-between align-items-center"
                >
                  <div>
                    <div>
                      <strong>{place.name}</strong>
                    </div>
                    <span className="text-muted">
                      {place.formatted_address}
                    </span>
                  </div>

                  <button
                    className="btn btn-outline-primary"
                    onClick={() => this.savePlace(place)}
                  >
                    Show
                  </button>
                </li>
              ))}
            </ul>
          </div>
          <div className="col">

          <Map google={this.props.google} zoom={14} initialCenter={center} onReady={this.initPlaces}></Map>
            
          </div>
        </div>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey,
})(MapContainer);

] 2

Answer 1

我检查了您的代码，如果您直接将API密钥放入您的 const apiKey = "PUT_YOUR_API_KEY_HERE";，它将正确显示您的地图。

似乎您将变量放在.env file中（有关如何添加自定义环境变量的信息，请参见here）。确保将.env file放在src文件夹之外，并将其设置在.env文件中： REACT_APP_GOOGLE_API_KEY=API_KEY_VALUE_HERE。这对我有用。

您可以在此link中找到示例代码。

请确保将.env文件中的REACT_APP_GOOGLE_API_KEY的值更改为您的API密钥。

希望这会有所帮助！

提取Google地图时遇到问题

1 个答案: