Question

刚开始使用react-google-maps并想知道在使用withScriptsjs HOC时使用了loadElement，containerElement和mapElement所需的属性。如示例所示，它们是否严格用于样式？我再也不确定这些属性是用于什么的。

Answer 1

此答案涉及与withGoogleMap HOC相关联的containerElement和mapElement道具。

如果您不包含containerElement或mapElement道具（在this CodeSanbox demo app中测试），则会出现以下错误：

缺少必需的道具containerElement或mapElement。你需要提供他们两个。 google.maps.Map实例将是在mapElement上初始化，它由containerElement包装。您需要提供这两者，因为Google Map需要DOM才能拥有初始化时的高度。

我看到它的方式，mapElement道具用于指定地图将附加的HTML元素。

在simple Vanilla JavaScript example（摘自Google地图文档）中，代码如下：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

google.maps.Map构造函数的第一个参数是要在其中创建新映射的DOM元素。在JS示例中，这是div元素，在body标记（id）中有<div id="map"></div>“map”。

至于containerElement道具：同一个JS示例没有明确指定容器元素，因为我相信假定body和html元素是容器。这就是CSS为它们指定高度的原因：

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

这与我上面分享的错误的以下部分有关：

... Google Map要求DOM在初始化时具有高度。

如果从JS示例中删除height: 100% CSS规则（尝试将其从this JSBin中的CSS中删除），则地图不再显示。这可能相当于删除containerElement prop。

关于loadingElement道具，我不确定那是什么......：）

使用withScriptjs HOC时所需的道具是什么？

1 个答案: