TypeError: Cannot read properties of undefined (reading 'latLng')

Question

现在，我正在尝试创建一个带有 React 的应用程序，我正在为项目使用 Google 地图 API。

我遇到了这个错误，但我不知道为什么会这样。

如果有人知道任何线索，请现在告诉我。

import React from 'react';
import GoogleMapReact from 'google-map-react';
import { Paper, Typography, useMediaQuery } from '@material-ui/core';

import useStyles from './styles'


const Map = () => {
  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width:600px)')

  const coordinates = { lat: 0, lng: 0 }

  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact>
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}
      </GoogleMapReact>
    </div>

  )
}

export default Map;

Answer 1

看看 GoogleMapReact 道具 <GoogleMapReact ...props></GoogleMapReact>

Answer 2

一个简单的>放错了地方。您没有无意中将 props 传递给组件，而是将 children 传递给组件。

   <GoogleMapReact>
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}
      </GoogleMapReact>

改成这样：

   <GoogleMapReact
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}>
      </GoogleMapReact>

TypeError: Cannot read properties of undefined (reading 'latLng')

TypeError: Cannot read properties of undefined (reading 'latLng')

google-maps

reactjs