javascript - 带有 React 的 Google map - "Required props loadingElement or googleMapURL is missing. You need to provide both of them"

Question

下午好，我正在尝试在 REACT 中渲染谷歌地图(带有图钉或标记)——我一直在学习本教程:

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

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

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

我知道这不是我的 googleAPI key ，因为我正在构建的网站上有另一个基本的 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

错误

Required props loadingElement or googleMapURL is missing. You need to provide both of them

发生在 props 之后:

• googleMapURL: String - Google Maps API Url
• loadingElement: ReactElement - 在 Google Maps 库完成加载之前呈现的元素

对于 withScriptjs HOC 是强制性的

例如:

<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%` }} />}
/>

Demo