Question

我正在创建一个使用react-google-maps的网络，我收到了一堆未定义的错误。我是新的反应/ 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;

看起来我没有正确导入谷歌地图，但看着这个例子，它不应该这样做。有什么想法吗？

Answer 1

您错过了生命周期和谷歌的导入。在示例中，您可以看到，

const {compose，withProps， lifecycle } = require（“重组”）;

并且示例中未提及谷歌的导入，但也应导入。

关于导入google，它与eslint验证有关，而不是JS。进行以下更改：

PlacesAutocomplete.js第1行：

/*global google*/

^这将声明eslint谷歌是一个全球名称，并将在运行时可用。有关详细信息，您可以通过此git page

Answer 2

您可以尝试此 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 3

当我尝试在Google Map组件中绘制一个圆时，我必须面对这个问题，所以我为地图组件创建了一个对象，并使用try-catch在componentDidUpdate中处理了该问题，因为在组件渲染时会花费很多时间。谢谢

    componentDidUpdate() {
        const { map, cir1, cir2, vertical } = this._generateProps()
        const { center } = vertical ? this._generateProps() : this.state
        circle1 ? circle1.setMap(null) : null
        circle2 ? circle2.setMap(null) : null
        if (cir1) {
            try {
                circle1 = new google.maps.Circle({
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 0,
                    fillColor: "#f5a623",
                    fillOpacity: 0.35,
                    map,
                    center,
                    radius: 450
                })
            }
            catch (e) {
                console.log(e)
            }

        }
        if (cir2) {
            try {
                circle2 = new google.maps.Circle({
                    strokeColor: "#f4ff10",
                    strokeOpacity: 0.16,
                    strokeWeight: 0,
                    fillColor: "#4a90e2",
                    fillOpacity: 0.3,
                    map,
                    center,
                    radius: 800
                })
            }
            catch (e) {
                console.log(e)
            }

        }
    }

Answer 4

我不知道为什么，但是使用Angular和React，您需要为这种库添加脚本标签，如下所示：

<body>
...
    <script src="https://maps.googleapis.com/maps/api/js?key=<API KEY>&callback=init"
    async defer></script>
</body>

如果您查看内部，则可以找到window.google的定义：

window.google = window.google || {};

在这种情况下，您将需要使用window.google而不是this.props.google。我将尝试找到一种更好的方法来使用该库，但这是我对这个未知问题的贡献...

react-google-maps＆＃34;＆＃39; google＆＃39;没有定义＆＃34;错误

4 个答案: