Google maps api 3 如何使用reactjs让谷歌地图在浏览器中100%显示？

我想用reactjs让谷歌地图全屏显示在浏览器中

我的CSS：

html, body, #map_canvas { height: 100%; margin: 0; padding: 0; width:100%; height:100%;}

我的组件定义如下：

class GMap extends React.Component {
    render() {      
        return (<div className="GMap">
          <div ref="map_canvas" id="map_canvas">
          </div>
        </div>)
    }
    componentDidMount() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map_canvas = ReactDOM.findDOMNode(this.refs.map_canvas);
        this.map = new google.maps.Map(map_canvas,
            mapOptions);
    }
}

另外，在这一行：

我是否与ref和id冗余

---

我正在使用ES6，但我对JSX解决方案持开放态度。我不想使用任何现有的“react google map library”，因为我只想使用现有的库。

问题是，您将

#map_canvas

设置为其父级的100%宽度和高度，

GMap

，在我看来，它没有定义高度或宽度

如果您创建了一个全屏类，那么您可以在两个元素上都使用它

.fullscreen {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /* extra fullscreen guarantees - you might not need the rest */
  position: absolute;
  top: 0;
  left: 0;
}

您还可以删除冗余的

id

，并切换到更新版本的

ref

语法

createMap(element) {
  var mapOptions = {
    center: { lat: -34.397, lng: 150.644},
    zoom: 8
  };

  this.map = new google.maps.Map(element, mapOptions);
}
render() {      
  return (
    <div className="fullscreen GMap">
      <div ref={this.createMap} className="fullscreen"></div>
    </div>
  );
}

createMap（元素）{
变量映射选项={
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
};
this.map=new google.maps.map（元素，mapOptions）；
}
render（）{
返回(
);
}

回答你的另一个问题-是的，你可以在你的渲染函数中有条件地改变这些东西。事实上，你根本不需要CSS

render() {
  const styles = {
    width: window.innerWidth,
    height: window.innerHeight
  };

  // you could also optionally use an alternate css class here.

  return (
    <div className="GMap">
      <div ref={this.createMap} style={styles}></div>
    </div>
  );
}

render（）{
常量样式={
宽度：window.innerWidth，
高度：window.innerHeight
};
//您还可以选择在这里使用另一个css类。
返回(
);
}

刚刚尝试了您的建议，但似乎没有显示出来（CSS）。如果我将fullscreen类的高度和宽度设置为“px”而不是百分比，我会看到它显示出来。更新CSS使其更加确定。在这个组件的两个位置设置“fullscreen”是否多余？还是一种更好的方法来为此构建dom？还有位置：绝对位置看起来有点棘手，如果我想在不同的环境中使用，而我并不总是希望它在页面上全屏显示，那该怎么办？只有在使用绝对位置时才是多余的。100%是一个相对的衡量标准，它使用父母的大小。您可以确保

#map_canvas

和body之间的所有元素都有一个宽度，或者您可以使用绝对方法。这可能是一个疯狂的问题，但是否有一些“智能”可以编码到渲染函数中，以检查是否存在这种情况并根据情况进行操作？