реакция-google-maps "ошибка" Google не определена "

Question

Я создаю сеть, использующую реагировать-Google-карты, и я получаю кучу неопределенных ошибок.Я новичок в реагировании / JS мире, поэтому любая помощь будет высоко ценится.Вот точные ошибки:

Failed to compile.

./src/App.js
  Line 23:  'lifecycle' is not defined  no-undef
  Line 25:  'google' is not defined     no-undef
  Line 28:  'google' is not defined     no-undef
  Line 29:  'google' is not defined     no-undef
  Line 30:  'google' is not defined     no-undef
  Line 32:  'google' is not defined     no-undef

Вот код:

import React, { Component } from 'react';
import './App.css';
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
const MapWithDirections = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `800px`, width: '800px'}} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();

            DirectionsService.route({
                origin: new google.maps.LatLng(45.29233869999999, -70.06117489999997),
                destination: new google.maps.LatLng(45.3570637, -70.06257679999999),
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    console.error(`error fetching directions ${result}`);
                }
            });
        }
    })
)((props) =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
        {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
    </GoogleMap>
)


class App extends Component {
  render() {
    return (
      <div className="App">
          <MapWithDirections/>
      </div>
    );
  }
}

export default App;

Похоже, я не могу правильно импортировать карты Google, но, глядя на пример, это не должно было,Есть идеи?

Answer 1

Вы можете попробовать это new window.google.maps

Это работает для меня!

Пример:

<Marker
  icon={{
    url:"../../assets/img/carz.png",
    anchor: new window.google.maps.Point(10, 10),
    scaledSize: new window.google.maps.Size(20, 20)
  }}
/>

Answer 2

Вы пропустили импорт как жизненного цикла, так и Google.В примере вы можете увидеть,

const {compose, withProps, lifecycle } = require ("Recompose");

, а импорт Google не упоминается впример, но он тоже должен быть импортирован.

Что касается импорта Google, это связано с проверкой eslint, а не JS.выполните следующие изменения:

PlacesAutocomplete.js Строка 1:

/*global google*/

^ это объявит, что google является глобальным именем и будет доступен во время выполнения.Для получения дополнительной информации вы можете перейти на эту страницу git