react-google-maps +自定义信息窗口问题：无法显示信息窗口

Question

我正在尝试在react-google-maps地图上显示信息窗口，但所记录的方式对我不起作用。

因此，我着手改变世界并按照Google的意图创建自定义信息窗口。而且我遇到一个错误：b.get不是一个函数。

能请你帮我吗？

这是我的代码：

import React, { Component } from 'react';
import { Fragment } from 'react'
import {withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow} from "react-google-maps";
import { MarkerClusterer } from "react-google-maps/lib/components/addons/MarkerClusterer"


let result = [];
let infoWindowOpen = true;

class Map extends Component {

  state = {
    venueInfo: 'https://api.londontheatredirect.com/rest/v2/Venues/',
    venues: [],
    markerPosition: [],
    map: []
  }

  componentDidMount() {

**我从另一个API获取了一些信息，这里没有错误**

    this.waitForGoogle()
  }




  waitForGoogle = (geocoder, map) => { !window.google?  (
      console.log('waiting for google'),
      setTimeout(this.waitForGoogle, 100)
    ) : (
    console.log(this.state),
      console.log('google is loaded'),
      geocoder = new window.google.maps.Geocoder(),
      map = window.google.maps.Map,

      this.setState({map: map}),

      this.geocodeAddress(geocoder)

    )
  }


  // implement markers from venue addresses
  geocodeAddress = (geocoder) => {
    this.state.venues.length === 0? (console.log('no venues found, waiting...'), setTimeout(this.geocodeAddress, 1000)):
    this.state.venues.slice(10, 20).map((venue) =>  // I HAD TO DO THIS TO AVOID GOOGLE API ERROR FOR TOO MANY REQUESTS

    {
      const address = venue[0]
      const name = venue[1]
      const that = this

      this.getAddress(geocoder, address, that)
    })
  }

  getAddress(geocoder, address, that) {
    if (address) {
      // ------------------
      //here is the handy code for geocode markers from google developers
      // ------------------
      geocoder = new window.google.maps.Geocoder();

      geocoder.geocode( { 'address': address, 'region': 'uk'}, function(results, status) {
        if (status === 'OK') {
          result.push([[results[0].geometry.location.lat(), results[0].geometry.location.lng()]])
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
        that.setState({ markerPosition: result})
      });
    }
  }

  drop() {
    if (window.google){
      return this.state.markerPosition.map((marker, index) =>
        <Fragment>
         <Marker
          onClick={() => {this.handleMarker(marker)}}
          key={index}
          position={{ lat: marker[0][0], lng: marker[0][1] }}
          />

        </Fragment>
      )
    }
  }

  handleMarker(marker) {
    console.log(this.state.map)
    console.log(marker)
     const infowindow = new window.google.maps.InfoWindow({
          content: '<h1>Placeholder text InfoWindow</h1>'
        });
    infowindow.open(this.state.map, marker);

    // let's show the infoWindow
    infoWindowOpen= true

  }

  render() {
    // variables from react-google-maps
    const MapWithAMarkerClusterer = withScriptjs(withGoogleMap(props =>
      <GoogleMap
        defaultZoom={this.props.mapZoom}
        defaultCenter={this.props.mapCenter}
      >
        <MarkerClusterer
          averageCenter
          enableRetinaIcons
          gridSize={60}
        >
          {this.drop()}
        </MarkerClusterer>
      </GoogleMap>
  ));

  return (
    <MapWithAMarkerClusterer
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXHssNaFm57yh0sOVvfmjp8VkfiPTW7yY&v=3.exp&libraries=geometry,drawing,places"
      loadingElement={<div style={{ height: 'calc(100vh / 2)' }} />}
      containerElement={<div style={{ height: '100%' }} />}
      mapElement={<div style={{ height: `100%` }} />}
      visible = {true}
    />
  )

  }
}
export default Map;