0

刚开始使用react-google-maps，想知道在使用withScriptsjsHOC 时需要使用哪些属性 loadingElement、containerElement 和 mapElement。如示例所示，它们是否严格用于样式？同样，我不确定这些属性的用途。

4

1 回答 1

1

这个答案是关于与HOCcontainerElement相关联的andmapElement道具。withGoogleMap

如果您不包含containerElementormapElement道具（在此 CodeSanbox 演示应用程序中对其进行测试），您将收到以下错误：

缺少必需的道具 containerElement 或 mapElement。您需要同时提供它们。该google.maps.Map实例将在 mapElement 上初始化，并由 containerElement 包装。您需要同时提供它们，因为 Google 地图要求 DOM 在初始化时具有高度。

在我看来，mapElementprop 用于指定地图也将附加的 HTML 元素。

在一个简单的 Vanilla JavaScript 示例（取自 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 示例中，这是在body 标记 ( )内div带有id"map"的元素。<div id="map"></div>

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

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

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

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

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

关于loadingElement道具，我不确定那是什么...... :)

于 2018-02-12T22:35:37.687 回答