React使用Google Map API时报Cannot read 'latLng' of undefined错误如何解决

你当前的代码存在两处核心语法错误，直接导致该报错：

1. 你把GoogleMapReact组件的所有配置属性错误写在了组件的子节点位置，而非组件标签的属性位，导致组件无法正确读取中心点坐标配置，内部调用坐标相关的latLng属性时找不到对应值抛出错误。
2. options、onChange、onChildClick三个属性被错误赋值为空字符串，这三个属性分别要求传入配置对象、回调函数、回调函数，空字符串会导致组件内部调用对应属性时报错。

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]}
        {/* 不需要配置的属性可以直接删除，不要传空字符串 */}
      >
        {/* 这里才是放置地图子标记、自定义覆盖物的位置 */}
      </GoogleMapReact>
    </div>

  )
}

export default Map;

• 如果需要自定义地图配置，可以给options传入符合Google Map API规范的配置对象，不要传空字符串
• 如果需要监听地图点击、视角变化等事件，给onChange、onChildClick传入对应的回调函数即可
• 检查你填入的bootstrapURLKeys的key是否是Google Cloud平台申请的有效Google Map API密钥，无效密钥也可能触发额外的加载错误

内容的提问来源于stack exchange，提问作者Abel