× TypeError: Cannot read property 'maps' of undefined - google.maps 未定义 (React)答案

【问题标题】：× TypeError: Cannot read property 'maps' of undefined - google.maps is undefined (React)× TypeError: Cannot read property 'maps' of undefined - google.maps 未定义 (React)
【发布时间】：2021-07-01 02:55:12
【问题描述】：

我在使用 google maps js API 时遇到错误，每隔几次加载我都会收到此错误。

TypeError：无法读取未定义的属性“地图” （匿名函数） src/features/landingPage/components/LandingPageMap.js:10

地图组件

const LandingPageMap = (props) => {
const { center, zoom, reports } = props;
const mapRef = useRef();

useEffect(() => {
   const map = new window.google.maps.Map(mapRef.current, {
    center: center,
    zoom: zoom,
    disableDefaultUI: true,
  });
 }, [center, zoom, reports]);

return (
 <>
   <div
    ref={mapRef}
    className={`map ${props.className}`}
    style={props.style}
  >
    Loading map...
  </div>
</>
 );
};

  export default LandingPageMap;

我在 head 标签内的 index.html 文件中获取 Google 地图 API。

 <script async
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-MAPS-API-KEY&libraries=places&callback=initMap">
 </script>

我不知道如何解决这个问题。感谢您的时间和帮助。

【问题讨论】：

您可以在尝试使用之前检查window.google 是否存在。 if (window.google) { //do stuff } 这将防止致命错误，但您可能并不总是有地图。
@LindaPaiste 我试过了，但不幸的是，它没有解决问题。

标签： reactjs google-maps

【解决方案1】：

使用框架时，加载 Maps Javascript API 并不像在普通 javascript 中那样将其放入 index.html 中那么简单。一种不依赖第三方库的方法是在地图组件中动态加载脚本。

这是一个简单的工作示例供您参考或参见下面的代码：https://stackblitz.com/edit/react-simple-map-ek1igt

App.js


    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Map from './components/map';
    import "./style.css";
    
    class App extends Component {
     
      render() {
        return (
           <Map 
            id="myMap"
            options={{
              center: { lat: -33.8569, lng: 151.2152 },
              zoom: 8
            }}
          />
        );
      }
    }
    
    export default App;

map.js


    import React, { Component } from 'react';
    import { render } from 'react-dom';
    
    class Map extends Component {
       constructor(props) {
        super(props);
      }
    
      onScriptLoad() {
        const map = new window.google.maps.Map(
          document.getElementById(this.props.id),
          this.props.options);
      }
    
      componentDidMount() {
        if (!window.google) {
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
          var x = document.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
          // Below is important. 
          //We cannot access google.maps until it's finished loading
          s.addEventListener('load', e => {
            this.onScriptLoad()
          })
        } else {
          this.onScriptLoad()
        }
      }
    
      render() {
        return (
          <div className="map" id={this.props.id} />
        );
      }
    }
    
    export default Map

【讨论】：