如何使用 reactjs 让谷歌地图在浏览器中 100% 显示？答案

【问题标题】：How to get Google Maps to show up at 100% in browser with reactjs?如何使用 reactjs 让谷歌地图在浏览器中 100% 显示？
【发布时间】：2015-11-30 01:56:10
【问题描述】：

我想让谷歌地图使用 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);
    }
}

我的问题是什么都没有出现。如果我在 CSS 中指定 width:500px 和 height:500px 或某个任意值，我可以看到它，但如果我不这样做，我什么也看不到。我想在 React 中复制它：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

另外，在这一行：<div ref="map_canvas" id="map_canvas"> 我是不是多余的 ref 和 id？

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

【问题讨论】：

标签： google-maps-api-3 reactjs ecmascript-6 react-jsx

【解决方案1】：

问题是您将 #map_canvas 设置为其父级 GMap 的 100% 宽度和高度，据我所知，它没有定义高度或宽度。

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

.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>
  );
}

回答您的另一个问题 — 是的，您可以在渲染函数中有条件地更改这些内容。事实上，你根本不需要 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>
  );
}

【讨论】：

刚刚尝试了您的建议，但它似乎没有出现 (CSS)。如果我将全屏类设置为“px”而不是百分比的高度和宽度，我会看到它显示出来。
更新了 CSS 使其更加坚定。
在这个组件的两个地方有“全屏”是多余的吗？或者为此构建dom的更好方法？另外 position:absolute 看起来有点棘手，如果我想在不总是希望它在页面上全屏显示的不同上下文中使用怎么办？
只有在使用绝对定位时才显得多余。 100% 是使用父母大小的相对度量。您可以确保#map_canvas 和body 之间的所有元素都有宽度，或者您可以使用绝对方法。
可能是一个疯狂的问题，但是否有一些“智能”可以编码到渲染函数中以检查并根据情况执行操作？