将 Google Maps 的 CDN 链接导入 ReactJs 项目

Question

我使用“create-react-app”创建了一个项目，该项目使用了 ReactJs、Node 和 Babel。我希望能够在 React 组件中访问 Google Map 的变量，但是由于 HTML 中的 CDN 是在组件之后加载的，因此它们无法及时使用。

我发现没有其他方法可以导入 Google 地图（例如 npm），所以我需要弄清楚如何加载外部文件以导入我的 React 类。

此外，我阅读了一些关于将其导入 webpack 文件的内容，但我也不确定如何执行此操作。

Answer 1

它有很多工作......

首先你从你的 index.html 上的 cdn 导入 lib

/* imports */

let google = window.google;
let mapProp = {
    /* props */
};

export class Map extends React.Component { 
/* code */

 componentDidMount() {
        /*addChangeListener*/
        let node = ReactDOM.findDOMNode(this);
        let map = new google.maps.Map(node, this.state.mapProp);
        this.setState({map}); //this.initialize(map);
        /* this.mountPath(map) your logic to mount map*/;
    }

}

对我的工作，希望能有所帮助。