Question

使用 react 添加谷歌地图时出错-TypeError:无法读取未定义的属性“maps”

2020-04-14

281

reactjs

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Map from "./Map.js"


class App extends React.Component {



  constructor(props) {
    super(props);

    this.loadScript = this.loadScript.bind(this);
  }

  loadScript() {

    const API_KEY = process.env.REACT_APP_API_KEY;
    const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

    const s = document.createElement("script");
    s.src = url;
    document.head.appendChild(s);
  }

  componentWillMount() {

    this.loadScript();

  }


  render() {

    return (

      <div>

        <Map />


      </div>


    );

  }
}

export default App;

//Map.js

import React from "react"

export default class Map extends React.Component {

    constructor(props) {
        super(props);

        this.loadMap = this.loadMap.bind(this);
    }

    loadMap() {

        const map = new window.google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    }

    componentWillMount() {

        this.loadMap();
    }


    render() {


        return (


            <div id="map" style={{ width: 100, height: 100 }}></div>

        );

    }




}

大家好，我是 React 的新手，我想在不使用第三方库的情况下加载 Google Maps。

我动态创建了一个脚本标签并将其插入到 DOM 中。我在尝试访问脚本中的变量时遇到了此错误。

我猜是在加载脚本之前访问了“maps”。我不知道该如何修复此错误。

Answer 1

当您以编程方式加载脚本时，您可以监听“onload”事件并在脚本加载时执行其余逻辑。在这种情况下，您的 loadScript 函数可能如下所示：

loadScript() {

  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

  const s = document.createElement("script");
  s.src = url;
  document.head.appendChild(s);
  s.onload = function(e){
     console.info('googleapis was loaded');            
  }
}

您可以将 scriptLoaded 状态添加到您的 App 组件并在 onload 函数中更改它，在这种情况下，您只需要在 scriptLoaded 为 true 时进行渲染：

  <div>
    {this.state.scriptLoaded && <Map />}
  </div>