google-map-react:添加圆半径

Question

我想在我的center周围添加一个红色的圆半径。我正在使用这个包https://github.com/google-map-react/google-map-react，下面是我的代码：

<GoogleMapReact
      bootstrapURLKeys={{key: this.googleAPIKey}}
      defaultCenter={{lat: this.props.latitude, lng: this.props.longitude}}
      defaultZoom={this.props.zoom}
      yesIWantToUseGoogleMapApiInternals={true}
      onGoogleApiLoaded={({map, maps}) =>
        new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.3,
          map,
          center: {lat: this.props.latitude, lng: this.props.longitude},
          radius: 275,
        })}
        >
      <AnyReactComponent
        lat={this.props.latitude}
        lng={this.props.longitude}
      />
    </GoogleMapReact>

但是，我得到以下错误：

​

​

我遵循了文档中的说明，并尝试在googling上搜索如何解决此问题。有什么想法吗？

Answer 1

只需这样做：

 onGoogleApiLoaded={({ map, maps }) =>
        new maps.Circle({

Answer 2

显然，这个错误的发生是因为Google Maps API无法加载/或者它在 onGoogleApiLoaded函数被调用之后被加载，这就是这个错误发生的原因。然而，由于问题中没有提供足够的细节，目前还不清楚为什么Google Maps API无法加载。

根据google_map.js的说法，控制台中应该显示一些关于错误的附加细节，这可能会揭示错误发生的原因：

.catch(function (e) {
    // notify callback of load failure
    _this._onGoogleApiLoaded({ map: null, maps: null });
    console.error(e); // eslint-disable-line no-console
    throw e;
 });

但是这个例子看起来是正确的，这个demo演示了如何画一个圆。