Question

react-google-maps“'google'未定义”错误

2018-05-27

21655

reactjs google-maps

我正在创建一个使用 react-google-maps 的网站，但出现了一堆未定义的错误。我是 react/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

您可以尝试这个 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

您错过了 lifecycle 和 google 的导入。在示例中，您可以看到，

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

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

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

PlacesAutocomplete.js 第 1 行：

/*global google*/

^ 这将向 eslint 声明 google 是一个全局名称，并将在运行时可用。有关更多信息，您可以访问此 git 页面

Answer 3

我不知道为什么，但是使用 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。我会尝试找到更好的方法来使用该库，但这是我对这个未知问题的贡献……