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

Question

下午好，我正在尝试在 REACT 中渲染 google-map（带有图钉或标记）——我一直在学习本教程：

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

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

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

我知道这不是我的 googleAPI 密钥，因为我正在构建的网站上有另一个基本 g-map，它呈现得很好。但是在我尝试将 'Travel Article' 引脚添加到 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 地图库完成加载之前一直渲染的元素

对于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

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

加载脚本一次

干杯

Answer 3

这可能会有帮助。我发现在使用“@react-google-maps/api”库时，您可以在 useJsApiLoader 挂钩中包含 Google 地图库。我收到以下错误：

Did you include prop libraries={['drawing']} in the URL? undefined

这是我的示例代码：

import React from 'react'
import { GoogleMap, useJsApiLoader, DrawingManager } from '@react-google-maps/api';

export default function InteractiveMap() {
  const key = "fullysickgoogleapikeyhere"

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: key,
    libraries: ["geometry", "drawing", "places"]
  })

  const center = {
    lat: -28,
    lng: 153.39
  }

  const containerStyle = {
    width: '100%',
    height: '70vh'
  };

  const drawingOnLoad = drawingManager => {
    console.log(drawingManager)
  }

  const onPolygonComplete = polygon => {
    console.log(polygon)
  }


  return (
    <div>
      {isLoaded ? (
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={12}
          onClick={(e) => console.log(e)}
        >
          <DrawingManager
            onLoad={drawingOnLoad}
            onPolygonComplete={onPolygonComplete}
          />
        </GoogleMap>
      ) : <></>}
    </div>
  )
}

它在文档中提到过，但在一个与正在寻找的内容并不真正相关的地方，但它让我振作起来运行。 React Google Maps Api

您确实会在控制台中收到性能警告，但可以对其进行更新以满足您的要求。

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

Google Maps with React - "Required props loadingElement or googleMapURL is missing. You need to provide both of them"

javascript

reactjs

google-maps

markers