google-maps - 使用 React 实现谷歌地图

Question

这里是 React 新手，请耐心等待:)希望这很容易解决

目前，我只是想让 map 显示在屏幕上，但是当我运行代码时，页面完全空白，甚至我的其他 div 也没有出现。这是我的代码，要点如下:https://gist.github.com/JoeyBodnar/f76c5d434d57c6cc6108513ad79d4cb7

需要注意的一些事情:1)从项目目录中，我已经运行了 npm install --save react-google-maps 2)使 map 显示的代码取自此处:https://github.com/tomchentw/react-google-maps

那么我究竟做错了什么？我的“const GettingStartedGoogleMap”声明在错误的地方吗？或者我在 div 中做错了什么？

另请注意，如果我从该文件中删除所有与谷歌地图相关的代码，一切都会正常工作。

感谢任何帮助，谢谢

编辑，这是我的代码，即使硬编码高度仍然显示空白屏幕:

 return (
     <GettingStartedGoogleMap
 containerElement={
    <div style={{ height: `400px` }} />
 }
 mapElement={
 <div style={{ height: `400px` }} />
 }
 onMapLoad={_.noop}
 onMapClick={_.noop}
 markers={markers}
 onMarkerRightClick={_.noop}
/>
  );

Answer 1

这是我之前答案的改进版本

我刚刚测试了你的代码，其中包含很多错误、未定义和未使用的变量! 因此，您可以使用以下代码，这非常简单(这将让您解决当前问题并显示 map !)

首先，安装必要的库:

npm install --save google-map-react
npm install --save prop-types

然后，您可以复制以下全部内容:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Google Map'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;