在React Google Maps中，即使组件是用withScriptjs包装的，也会得到“未定义'google'吗？”

Question

我正在尝试在使用create-react-app创建的React项目中复制https://tomchentw.github.io/react-google-maps/#groundoverlay中的示例；到目前为止，我在https://github.com/khpeek/trailmaps。

在src/components中，我有一个groundOverlay.js，如下所示：

import React from 'react';

const { compose } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  GroundOverlay,
} = require("react-google-maps");

const MapWithGroundOverlay = compose(
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{lat: 40.740, lng: -74.18}}
  >
    <GroundOverlay
      defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
      defaultBounds={new google.maps.LatLngBounds(
        new google.maps.LatLng(40.712216, -74.22655),
        new google.maps.LatLng(40.773941, -74.12544)
      )}
      defaultOpacity={.5}
    />
  </GoogleMap>
);

然后，在App.js中，我有

import React, { Component } from 'react';
import './App.css';
import MapWithAnOverlayView from './components/overlayView';
import MapWithGroundOverlay from './components/groundOverlay';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Custom Overlay</h1>
        </header>
        <MapWithGroundOverlay
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `400px` }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default App;

但是，出现以下错误：

有人知道为什么这行不通吗？这不是正确的方法吗？

Answer 1

您需要为eslint定义google是全局变量，例如

/* global google */

您可以将其放在使用文件的顶部

defaultBounds={new google.maps.LatLngBounds(
    new google.maps.LatLng(40.712216, -74.22655),
    new google.maps.LatLng(40.773941, -74.12544)
)}

要使代码正常工作，还需要从groundOverlay.js文件中正确导出组件，如下所示：

/* global google */
import React from 'react';

const { compose } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  GroundOverlay,
} = require("react-google-maps");

const MapWithGroundOverlay = compose(
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{lat: 40.740, lng: -74.18}}
  >
    <GroundOverlay
      defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
      defaultBounds={new google.maps.LatLngBounds(
        new google.maps.LatLng(40.712216, -74.22655),
        new google.maps.LatLng(40.773941, -74.12544)
      )}
      defaultOpacity={.5}
    />
  </GoogleMap>
);

export default MapWithGroundOverlay;

执行此操作后，它应该可以在下面的屏幕中显示。

我将为您的仓库创建PR，因此您可以将其合并并继续工作。

创建的拉动请求：https://github.com/khpeek/trailmaps/pull/1

Answer 2

Sing google 是一个全局变量，你需要使用 window 这种方式显式读取它

const google = window.google;

或者你可以直接访问它

new window.google.maps.LatLngBounds()

ESlint 修复可以通过在文件顶部声明它来完成

/*global google*/

Answer 3

尝试在 @Component

之前使用declare var google;

示例：

import React, { Component } from 'react';
import './App.css';
import MapWithAnOverlayView from './components/overlayView';
import MapWithGroundOverlay from './components/groundOverlay';

declare var google;

class App extends Component {

}