带有 React 的 Google 地图-“缺少必需的道具 loadingElement 或 googleMapURL。您需要同时提供它们”

Question

下午，我正在尝试在 REACT 中渲染谷歌地图（带有图钉或标记） - 我一直在关注本教程：

https://medium.com/@morgannegagne/google-maps-with-react-951c12b723ad

但是我不断收到同样的错误：

“缺少必需的道具 loadingElement 或 googleMapURL。您需要同时提供它们”

我知道这不是我的 googleAPI 密钥，因为在我正在构建的站点上有另一个基本的 g-map，它呈现得很好。但是在我尝试将“旅行文章”引脚添加到 gmap 的部分中 - 事实证明它很棘手：代码如下所示：

import React from "react";
import ArticleMarker from "./ArticleMarker";
import ArticleMapContainer from "./ArticleMapContainer";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  } from 'react-google-maps';

const ArticlesMap = withScriptjs(withGoogleMap((props) =>{

  const markers = props.articles.map( article =>
                <ArticleMarker
                  key={article.uid}
                  doctor={article}
                  location={{lat: article.closestArticle.lat, lng: article.closestArticle.lon}}
                />);
  return (
      <GoogleMap
        defaultZoom={14}
        center={ { lat:  42.3601, lng: -71.0589 } }
        >
        {markers}
      </GoogleMap>
    );
  }
))

export default ArticlesMap;

任何想法将不胜感激 - 谢谢！

Answer 1

错误

缺少必需的道具 loadingElement 或 googleMapURL。你需要同时提供它们

发生自props：

• googleMapURL: String-谷歌地图 API 网址
• loadingElement: ReactElement - 在谷歌地图库完成加载之前呈现的元素

对HOC是强制性的withScriptjs

例如：

<ArticlesMap 
  googleMapURL="https://maps.googleapis.com/maps/api/js?key=--YOUR-KEY-GOES-HERE--"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

演示

Answer 2

如果您使用多个库，例如用于地图的 react-google-maps 和用于自动完成搜索的 react-places-autocomplete，那么您只需加载 google api 一次。

为此，您可以在 index.html 中添加脚本

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&libraries=geometry,drawing,places"></script>

其次，在您的地图组件中，不要使用 withScript js 即

export default (withGoogleMap(Map));

第三，从道具中删除 googleMapURL 和 loadingElement。

这只会从 index.html 加载脚本一次

干杯