您可能已在 index.html 中包含了 google ，因此 google 变量在您的组件中不可访问，因为它是一个 window 变量 。

尝试使用 window.google.maps.xxx ，然后它必须解决您的 TypeError

针对您的特定情况

import React from 'react';
...

let geocoder = new window.google.maps.Geocoder();  // edited


const MyMapComponent = compose(
...

您的代码的主要问题是这个片段：

<MyMapComponent markers={this.state.markers} maps={this.props.myMap} />

我假设 DemoApp 是您在 index.js 文件中安装的主要应用程序组件。您尚未将任何 props 传递给 DemoApp 组件 ，因此在 MyMapComponent 中， maps prop 未定义。在该组件内使用 props.maps.lat 导致出现 TypeError：无法读取未定义的属性“maps” 错误。

我注意到其他一些小问题：

• 此代码是不必要的：

  import { ..., GeoCoder } from 'react-google-maps';
  

  react-google-maps 甚至没有导出具有该名称的组件。也许以前是，但现在不再是了。您可以在文档中查看。

• 这也不是必需的：

  let geocoder = new google.maps.Geocoder();
  

• 我将 googleMapURL 更改为文档中的 URL：

  googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=your_key_goes_here&v=3.exp&libraries=geometry,drawing,places'
  

  您现在可以跳过生成密钥，但控制台中会出现警告。

以下是有效代码：

import React, { Component } from 'react';
import { compose, withProps, withHandlers } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';
import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';

const MyMapComponent = 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: '400px' }} />,
    mapElement: <div style={{ height: '100%' }} />
  }),
  withHandlers({
    onMarkerClustererClick: () => (markerClusterer) => {
      const clickedMarkers = markerClusterer.getMarkers();
      console.log(`Current clicked markers length: ${clickedMarkers.length}`);
      console.log(clickedMarkers);
    }
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    zoom={props.maps.zoom}
    center={{ lat: props.maps.lat, lng: props.maps.lng }}
    heading={5}
  >
    <MarkerClusterer
      onClick={props.onMarkerClustererClick}
      averageCenter
      enableRetinaIcons
      gridSize={60}
    >
      {props.markers.map(marker => (
        <Marker key={marker.photo_id} position={{ lat: marker.latitude, lng: marker.longitude }} />
      ))}
    </MarkerClusterer>
    <Marker position={{ lat: props.maps.lat, lng: props.maps.lng }}>
      <InfoWindow>
        <p>test text</p>
      </InfoWindow>
    </Marker>
  </GoogleMap>
));

export default class DemoApp extends Component {
  render() {
    const markers = [
      { photo_id: 1, longitude: 76.91127, latitude: 11.032595 },
      { photo_id: 2, longitude: 75.806682, latitude: 11.259169 },
      { photo_id: 3, longitude: 77.21378, latitude: 28.617671 }
    ];

    const myMap = {
      lng: 78.138991,
      lat: 9.903245,
      zoom: 6
    };

    return <MyMapComponent markers={markers} maps={myMap} />;
  }
}

我在引用 window.google.maps.Size 时遇到了类似的错误，此行修复了该错误。

import { OverlayView } from '@react-google-maps/api'