Question

在这里反应新手，请耐心等待:)希望这个解决起来非常简单

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

有几点需要注意：1）从项目目录开始，我已经运行了npm install --save react-google-maps 2）显示地图的代码是从这里获取的：https://github.com/tomchentw/react-google-maps

那我究竟做错了什么？是我的＆＃34; const GettingStartedGoogleMap＆＃34;在错误的地方？或者我在div中做错了什么？

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

感谢任何帮助，谢谢

编辑，这是我的代码，仍然显示空白屏幕甚至硬编码高度：

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

Answer 1

这是我之前回答的改进版

我刚刚测试了您的代码，其中包含大量错误，未定义和未使用的变量！因此，您可以使用以下代码，这非常简单（这将让您解决当前问题并显示地图！）

首先，安装必要的库：

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;

Answer 2

设置<div style={{ height: 400px }} />的高度（以像素为单位）。

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

Answer 3

事实是：GoogleMap要求在渲染之前正确设置元素的长度！因此，您可以：

为地图元素设置静态高度:(第62行）

mapElement={
  <div style={{ height: `300px` }} />
}

OR

使用脚本在页面加载后动态设置它：

componentDidMount() {
    console.log("component is mounted");
    this.setState({
      pageHeight = document.documentElement.offsetHeight + 'px'
    });
}
...
mapElement={
  <div style={{ height: this.state.pageHeight }} />
}

抱歉，我没有足够的时间来测试您的代码，我可以根据自己的经验看到问题！因此，如果地图尚未显示，请随时为“containerElement”元素设置像素高度！

以下编辑版本：

请阅读我的新答案

Answer 4

npm个模块，例如google-map-react

在调试时，所有div都位于绝对位置

  width: 100%;
  height: 85vh;
  position: relative;

将解决问题

用反应

4 个答案: