Google-Maps-React：将道具传递给 App.js 的问题

Question

我正在开发一个网站，我想通过 Google-Maps-React 包使用 google maps API。 我之前测试过它，作为一个单一的应用程序，我成功地从 API 获取数据并将其呈现在屏幕上。现在我试图在我的实际项目中使用它，但它不起作用。我想问题可能是我没有正确地将道具从一个组件传递到另一个组件。

任何有关如何解决此问题的建议将不胜感激。非常感谢你！

这是我的两个组件和我在控制台上收到的消息（Webpack 编译成功）：

index.js:139 未捕获的错误：您必须包含 google 属性 在新地图 (index.js:139)

Venue.js 持有实际地图

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

const mapStyles = {
    width: '100%',
    heigth: '100%',
};

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

        this.state = {
            venues: [
                { lat: 52.471015, lng: 12.719707 }
            ]
        }
    }

    displayMarkers = () => {
        return this.state.venues.map((venue, index) => {
          return <Marker key={index} id={index} position={{
            lat: venue.latitude,
            lng: venue.longitude
          }}
          onClick={() => console.log(this.state.venues)} />
        })
      }

      render() {
        return (
          <Map
           google={this.props.google}
           zoom={8}
           style={mapStyles}
           initialCenter={{ lat: 52.471015, lng: 12.719707 }}
          >
            {this.displayMarkers()}

          </Map>
        );
      }
    }


export default GoogleApiWrapper({
    apiKey:''
  })(MapContainer);

App.js

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
import MapContainer from "google-maps-react";


export class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false,
        };        
    }

    componentDidMount() {
        console.log("App mounted");

    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Main} />
                    <Route exact path="/venue" component={MapContainer} />
                </div>
            </BrowserRouter>
        );
    }
}

Answer 1

因为你的导入 MapContainer 路径不正确！

在您的App.js 文件更改中：

import MapContainer from "google-maps-react";

到您的 MapContainer 组件，例如：

import MapContainer from "./components/Venue.js";

简单演示：HERE