google-map-реакции: добавление радиуса круга

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>

Однако я получаю следующую ошибку:

Я следовал инструкциям в документации и пытался найти, как решить эту проблему.Есть идеи?

Answer 1

Просто сделай:

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

Answer 2

По-видимому, эта ошибка возникает, поскольку API Карт Google не может быть загружен / или загружается после , вызывается функция onGoogleApiLoaded , поэтому и возникает эта ошибка.Неясно, однако, сказать , почему API Карт Google не удалось загрузить, так как в вопросе было предоставлено недостаточно деталей.

Согласно 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;
 });

Но пример выглядит правильно , и эта демонстрация демонстрирует, как нарисоватькруг.