Google-Maps -реагировать: Проблемы с передачей реквизита в приложение. js - PullRequest
Новая
       31

Google-Maps -реагировать: Проблемы с передачей реквизита в приложение. js

1 голос
/ 13 января 2020

Я работаю над сайтом, и я хотел бы использовать API карт Google через Google-Maps -реактивный пакет. Я уже тестировал его как отдельное приложение, и мне удалось вернуть данные из API и отобразить их на экране. Сейчас я пытаюсь использовать его в моем реальном проекте, и он не работает. Я предполагаю, что проблема может заключаться в том, что я не передаю реквизиты должным образом от одного компонента к другому.

Буду очень признателен за любые предложения по устранению этой проблемы. Большое спасибо!

Вот мои два компонента и сообщение, которое я получаю на консоли (Webpack успешно скомпилирован):

index. js: 139 Uncaught Error: Вы должны включить google реквизит на новой карте (индекс. js: 139)

Место. 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);

Приложение. 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>
        );
    }
}

1 Ответ

1 голос
/ 13 января 2020

Поскольку ваш путь импорта MapContainer неверен!

в вашем App.js изменении файла: 

import MapContainer from "google-maps-react";

в вашем компоненте MapContainer, например: 

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

simple демо: ЗДЕСЬ

...